setTimeout, opacity, og simultan 'animation'
HejJeg sidder og eksperimentere lidt med at lave en "animation" via javascript. Og ja, det er måske ikke det flotteste, men det er sjovt at rode med.
Så nu er jeg så ramt mod et lille problem :
Jeg har lavet 2 bokse på min side, der hver især "dimmer" når man klikker på dem. Dette er gjort via at sænke opacity/alpha filtret på boksen, med setTimeOut.
Det er der mit problem det er at JavaScript som bekendt ikke køre flere tråde, eller processer, så når jeg klikker på den første boks, og derefter på den anden(inden den første "animation" er færdig), sker der sjove ting.
Jeg har forsøgt mig med en boolsk lock, der håndtere adgangen til sleep metoden, men det virker ikke, jeg har også forsøgt mig med 2 metoder, som er ens, men som hver boks benytter, men det er heller ikke det smarteste(plus at jeg heller ikke kunne få det til at virke), jeg ville gerne gøre brug af den samme metode.
Det jeg gerne vil opnå at de dimmer samtidigt, og ikke at boks 2 først starter når den første er færdig.
Her er min kode :
<html>
<head>
<style>
DIV.dim_box
{
width:100px;
height:100px;
filter: Alpha(Opacity=100);
opacity:1.00;
}
</style>
<script>
var opacity = 100;
var speed = 20;
var currentElement;
var browserName=navigator.appName;
function dimBox(element)
{
currentElement = element;
if (browserName=="Microsoft Internet Explorer")
{
document.getElementById(currentElement).style.filter='Alpha(opacity=' + opacity +')';
}
else
{
document.getElementById(currentElement).style.opacity=opacity/100;
}
opacity = opacity-1;
if(opacity >= 0)
{
sleep("dimBox(currentElement)",speed);
}
else
{
opacity = 100;
}
}
function sleep(method, time)
{
window.setTimeout(method,time);
}
</script>
</head>
<body>
