マウスの上のフラッシュイメージ

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