while mouse中的Flash图像已结束

Question

我需要在鼠标悬停在鼠标上方时闪烁图像并在鼠标悬停后停止闪烁。但是“flash_imgs”总是通过鼠标移动div来调用。

如果我使用2个按钮（#start，#stop）和.click（） - 一切正常。但我只需要'mouseover'和'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 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); 
    }); 
})(); 

谢谢！

Answer 1

鼠标悬停可能是错误的事件。每当你移动你的鼠标就会重新触发，并且你将建立一个队列。所以首先要交换mouseenter和mouseleave。

接下来，您只会清除mouseout上的间隔，这意味着它不可能立即停止。我相信jQuery有一个可以用于动画的.stop()函数，但是我认为我会把这个部分留给你...因为我觉得脏，使得闪烁的内容。 ;-)

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); 
});