Question

I need to flash images while mouse is over them and stop flashing after mouseout. But “flash_imgs” is called always with mouse move over div.

If I use 2 buttons (#start, #stop) and .click() – everything is ok. But I need only ‘mouseover’ and ‘mouseout’.

HTML:

<div class="container">
    <img src="img1.gif" alt="" class="slide">
    <img src="img2.gif" alt="" class="slide">
    <img src="img3.gif" alt="" class="slide">
    <img src="img4.gif" alt="" class="slide">
</div> 

Style:

<style type="text/css">
    img { position: absolute;   width: 600px; height: 300px;}
    div.container { border: 1px solid red;  width: 600px; height: 300px; }
</style>

JS:

(function() {
    var enable = null,
        container = $('div.container'),
        imgs = container.find('img'),
        timeInOut = 1000,
        intervalTime = imgs.length * timeInOut;

    imgs.each( function( ){
        $(this).hide();
    });

    function flash_imgs( images, time ){
        images.each( function( i ){
            $(this).delay( time * i ).fadeIn( time / 2 ).fadeOut( time / 2 );
        });
    }

    container.on('mouseover', function(){
        flash_imgs( imgs, timeInOut );
        enable = setInterval(flash_imgs, intervalTime, imgs, timeInOut);
    });

    container.on('mouseout', function(){
        clearInterval(enable);
    });
})();

Thanks!

Answer 1

Mouseover is probably the wrong event. Every time you move your mouse it’s going to retrigger, and you’re going to build up a queue. So first thing is to swap in mouseenter and mouseleave instead.

Next, you are only going to clear the interval on mouseout, meaning it is not likely to immediately stop. I believe jQuery has a .stop() function that can be used for animations, but I think I’ll leave that part up to you… cause I feel dirty enabling flashing content. 😉

http://jsfiddle.net/FnTan/

container.on('mouseenter', function(){
    flash_imgs( imgs, timeInOut );
    enable = setInterval(flash_imgs, intervalTime, imgs, timeInOut);
});

container.on('mouseleave', function(){
    clearInterval(enable);
});