Frage

I'm trying to make image rotator with Jquery, but my rotator won't stop when I put the mouse over the images, so I'm guessing that something's wrong with clearTimeout.
Here's my code: 

$(document).ready(function () {
    var o = 0
    var t = null;
    stop = false;
    $("img:gt(0)").hide();
    broj = ($("img").size());

    function promena() {
        o++;
        if (o == broj) {
            o = 0;
            $("img:lt(3)").hide(function () {
                $("img").eq(3).delay(1000).fadeOut(1000);
            });
        }
        $("img").eq(o).delay(1000).fadeIn(1000, function () {
            t = setTimeout(promena, 1000);
        });
    };

    t = setTimeout(promena, 1000);
    $("div img").mouseover(function () {
        clearTimeout(t);
    });
});

And here's HTML: 

<html>
<head>
<title>M</title>
</head>
<body>
 <div>
 <img src="images/1.jpg"    />
 <img src="images/2.jpg"    />
 <img src="images/3.jpg"    />
 <img src="images/4.jpg"    />
 </div>
</body>
</html>

If it means anything, all of my images are positioned absolutely with img{position:absolute}

War es hilfreich?

Lösung

Your code is essentially doing this:

  1. timeout timer running for one second
  2. delay running for one second
  3. fade running for one second
  4. repeat

--> if you trigger the mouseover event, and hence call clearTimeout at any point other than (1), you aren't clearing any running timer.

In other words, if you do this after, lets say 1.5 seconds, the delay is still running, then the fade, and then you call setTimeout again - so you are attempting to clearTimeout before calling setTimeout.

You should probably call .stop() to stop the delay and fade queue, and prevent setTimeout running when they are complete.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top