Question

操作：将鼠标悬停在多个＆＃34; h2＆＃34;一次扫描鼠标的元素。

预期的行为： fadeIn和fadeOut对应＆＃34;文章＆＃34;元素，一个接一个。一次只能看到一篇文章，并且在mouseleave所有h2元素之后都不应该看到文章元素。

实际行为：可以看到一篇或多篇文章。

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

<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

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

你需要＆＃34;完成＆＃34;动画首先，你的代码非常混乱。我已将代码简化为：

Jquery的

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

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

此代码适用于＆＃34;整理＆＃34;所有关于文章的动画，然后基于h2索引在文章中淡出。在鼠标离开时，它会淡化所有文章。

Answer 2

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

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

我建议您使用fadeOut(duration);属性设置动画时间

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

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没有触发

3 个答案: