1

我需要在鼠标悬停时闪烁图像，并在鼠标移出后停止闪烁。但是“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);
    });
})();

谢谢！

4

1 回答 1

1

鼠标悬停可能是错误的事件。每次您移动鼠标时，它都会重新触发，并且您将建立一个队列。因此，首先要做的是换入mouseenter而mouseleave不是。

接下来，您将只清除鼠标移出的时间间隔，这意味着它不可能立即停止。我相信 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 回答