Question

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

谢谢！

Answer 1

Mouseover可能是错误的事件。每次移动鼠标时，它都会重新触发，而你将建立一个队列。首先，交换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);
});

鼠标结束时闪光图像

1 个答案: