jQuery 多个悬停事件 - mouseleave 未触发

Question

操作： 一次鼠标悬停在多个 "h2" 元素上。

预期行为： fadeIn 和 fadeOut 对应 "article" 个元素，一个接一个。一次只能显示一篇文章，鼠标离开所有 h2 元素后不应显示任何文章元素。

实际行为：一篇或多篇文章可见。

我的回复： ???尝试 2 天... ???转到Whosebug并希望得到帮助。（提前致谢！）

<div>
    <h2>heading 1</h2>
    <h2>heading 2</h2>
    <h2>heading 3</h2>
</div>
<div>
    <article>article 1</article>
    <article>article 2</article>
    <article>article 3</article>
</div>

<style>
    article {
        display: none;
    };
</style>

<script>
    $(document).ready(function(){

var clicked = false;
var hovered = false;
//click behavior    
    $("h2").click(function(event){
        var index = $(this).closest("h2").index() + 1;
        $("article:not(article:nth-of-type(" + index + "))").fadeOut();
           $("article").promise().done(function(){
               if (clicked == true) {
                   $("article:nth-of-type(" + index + ")").fadeOut();
                   clicked = false;
                   hovered = false;
               } else if (hovered == true){
                    clicked = true;
               } else {
                   $("article:nth-of-type(" + index + ")").fadeIn();
                   clicked = true;
               }

        });
    });

 //click anywhere else to hide articles     
    $(document).click(function(event){
        if (!$(event.target).closest("h2").length) {            
            $("article").fadeOut();
            clicked = false;
            hovered = false;
        };
    });
//hover behavior

    $("h2").hover(function(event){
        var index = $(this).closest("h2").index() + 1;
        if (clicked == false) {
            hovered = true;
            $("article").promise().done(function(){
                $("article:not(article:nth-of-type(" + index + "))").fadeOut();
                $("article").promise().done(function(){
                    $("article:nth-of-type(" + index + ")").fadeIn();
            });});
        };}, function() {
        if (clicked == false) {
            $("article").promise().done(function(){
                $("article").fadeOut();
                hovered = false;
            });
        }; 
    });
});
</script>

Answer 1

在淡出动画完成之前您的悬停速度很快，因此您在悬停时看到了两篇以上的文章。

默认情况下fadeout()动画持续时间为 400 毫秒

我建议你使用fadeOut(duration); 属性来设置动画的时间，比如

fadeOut(1);// or work around the best suited time (in milli secs) for you

Answer 2

查看更新后的fiddle：http://jsfiddle.net/0n0g0gtx/4/

你需要先"finish"动画，你的代码很乱。我把代码简化成这样：

Jquery

$(document).ready(function(){
    $(document).on({
        mouseenter: function () {            
            $("article").finish();   
            $("article").eq($(this).index()).fadeIn();
        },

        mouseleave: function () {            
            $("article").fadeOut();
        }
    }, "h2");
});

此代码适用于 "finishing" 文章中的所有动画，然后根据 h2 索引在文章中淡入淡出。在鼠标离开时它会淡出所有文章。

Answer 3

您可以使用更简单的代码

$(document).ready(function(){
  $("h2").hover( 
    function(){
      $("article").finish();
      $("article").eq($(this).index()).fadeIn(300);
    }, 
    function(){
      $("article").hide();
    });
});

参考这个http://jsbin.com/mavefohobe/1/edit?html,js,console,output

jQuery 多个悬停事件 - mouseleave 未触发

jQuery multiple hover events- mouseleave not firing

jquery

hover

mouseleave

fadeout