阻止执行.mouseout事件

Question

我在此HTML结构中列出了图像和说明：

<div class="canDo">
    <p>
        <img src="http://placehold.it/100x100" />
        <span>Description 1</span>
    </p>
    <p>
        <img src="http://placehold.it/100x100" />
        <span>Description 2</span>
    </p>
    <p>
        <img src="http://placehold.it/100x100" />
        <span>Description 3</span>
    </p>

    <p></p>
</div>

我用CSS隐藏<span>并使用jQuery函数将描述添加到最后一个<p> 。 选择HTML结构也可以与我的响应式布局一起使用。

$(document).ready( function() {
    $(".canDo img").mouseover( function() {
        $(".canDo img").removeClass('active').addClass('fade');
        $(this).addClass('active').removeClass('fade');
        $(".canDo p:last-child").fadeOut(function() {
            var msg = $('.canDo img.active').next('span').html()
            $(".canDo p:last-child").text(msg).fadeIn();
        });
    })
    .mouseout( function() {
        setTimeout(function(){
            $(".canDo img").removeClass('active fade')
            $(".canDo p:last-child").fadeOut();
        }, 3000);
    });
});

我遇到的问题是，当我将鼠标悬停在第一项然后第二项（并将鼠标悬停在第二项上）上时，将执行第一项的mouseout功能，从而使淡入淡出效果和文本消失。

如何防止这种情况发生？

我还做了一个jsFiddle 。

Answer 1

试试这个...我想这就是你想要的。 让我知道是否不是。

http://jsfiddle.net/bpd2Ldy1/

所以...我所做的就是将setTimeout函数的结果（返回特定的超时ID）分配给变量tm 。 如果已设置（表示3秒钟后某些东西逐渐消失），并且用户将鼠标悬停在另一个小盒子上，它将清除并停止超时。 这样就不会与新的mouseover事件发生冲突。 如果没有鼠标悬停.canDo ，则超时将在3秒后不中断地完成。

$(document).ready( function() {
    $(".canDo img").mouseover( function() {
        $(".canDo img").removeClass('active').addClass('fade');
        $(this).addClass('active').removeClass('fade');

        if (typeof(tm) != 'undefined') {
            clearTimeout(tm);
        }
        $(".canDo p:last-child").stop().fadeOut(function() {
            var msg = $('.canDo img.active').next('span').html()
            $(".canDo p:last-child").text(msg).stop().fadeIn();
        });

    })
    .mouseout( function() { 
        tm = window.setTimeout(function(){
            $(".canDo img").removeClass('active fade')
            $(".canDo p:last-child").stop().fadeOut("slow");  
        }, 3000); 
    });
});