1

マウスが上にあるときに画像をフラッシュし、マウスアウト後にフラッシュを停止する必要があります。ただし、「flash_imgs」は常にマウスをdiv上に移動すると呼び出されます。

2つのボタン（＃start、＃stop）と.click（）を使用すると、すべて問題ありません。しかし、必要なのは「マウスオーバー」と「マウスアウト」だけです。

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

ありがとう！

4

1 に答える 1

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);
});
于 2012-04-06T06:28:17.207 に答える