jquery stop loop when mouseout

Question

What I am trying to create is a movie clip out of thumbnails. The difficulty is that these thumbnails are coming from different websites. This means, the position of the thumb counter is by each url different. I do replace the point of the counter by '$var', this is my anchor point.

for example; I have got these thumb url's

http://site.net/videos/thumbs/9d/06/80/9d0680f347eb6/9d0680f347eb6.$var.jpg

http://site.net/_thumbs/0000043/0043917/0043917_$varm.jpg

http://site.net/201309/16/8834679/original/$var.jpg?m=eSuQKgaaaa&mh=t0i7nVhjZleTJ5Ih

I would like to create a counter by hover, a counter who replaces $var for a number.

My html code would be something like this:

<a href="" class="ml" data-int="3" data-src="http://site.net/_thumbs/0000312/0312718/0312718_$varm.jpg">
<img id="test" src="http://site.net/_thumbs/0000312/0312718/0312718_002m.jpg"/>
</a>

I build this with jQuery, it works with the replacement but I can't stop the loop when someone leaves the image (mouseout). 'fillout' I did not work on this function yet, it will be a function to fill the counter out with zero's, sometimes I need '002' instead of just '1'. the amount of these digits I get from data-int

$('a.ml').hover(function(){

   //fillout = $(this).data('int');
   var img = $(this).data('src');

    // loop
    var i = 2;
    function loopLi() {
        setInterval(function() {

            if(i != 8) {
                i++;

                $('img#test').attr("src", img.replace(/\$var/, "00" + i));
            }

        }, 500);
    }

    $(loopLi);
});
$('a.ml').mouseleave(function(){

   //fillout = $(this).data('int');

   // get image url
   var img = $(this).data('src');
   $('img#test').attr("src", img.replace(/\$var/, "002"));
});

score 3 · Accepted Answer · answered Sep 17 '13 at 09:58

The .hover() is a short cut to register both mouseenter and mouseleave handlers, if only one function is passed then the same function is called on both the events.

To cancel the loop, you need to store the interval reference on mouseenter and cancel it on mouseleave.

Try

$('a.ml').hover(function(){
    //fillout = $(this).data('int');
    var img = $(this).data('src');

    // loop
    var i = 2;
    var interval = setInterval(function() {
        if(i != 8) {
            i++;
            $('img#test').attr("src", img.replace(/\$var/, "00" + i));
        }
    }, 500);
    $(this).data('interval', interval)
}, function(){
    clearInterval($(this).data('interval'))

    //fillout = $(this).data('int');

    // get image url
    var img = $(this).data('src');
    $('img#test').attr("src", img.replace(/\$var/, "002"));
})

Thank u for this fast one :) It helped me out! Will accept your answer when I can :) — directory, Sep 17 '13 at 10:02

jquery stop loop when mouseout

1 Answers1