Question

我正在尝试淡入淡出并使用mouseenter和mouseleave淡出一些图标，但我注意到我的代码工作效果不是很好。我在我的代码中添加了一些控制台日志，并在mouseenter上注意到我的mouseleave日志也被调用了。谁能解释我做错了什么？

问题的JSFiddle：http://jsfiddle.net/BndxN/1 当我快速将鼠标悬停在菜单上时，图标会显示在按钮下方？

JS

/* On sharePage hover hide label and display social icons */
$sharePage.mouseenter(function(){
    $sharePageLabel.fadeOut(function(){
        $socialIconItems.each(function(i){
            $(this).delay(i*45).stop(true,true).fadeIn();
            //console.log($(this));
        });
    });
});
$sharePage.mouseleave(function() {
    $($socialIconItems.get().reverse()).each(function(i){
        $(this).delay(i*305).fadeOut();
        if(i==3){$sharePageLabel.fadeIn()}
    });
});

HTML

<div id="sharePage">
      <h3>Pass The Party On</h3>
      <ul id="socialIcons" class="cf">
        <li><a href="" class="fb ir" data-network="facebook" data-shareurl="">Facebook</a></li>
        <li><a href="" class="twitter ir" data-network="twitter" data-shareurl="">Twitter</a></li>
        <li><a href="" class="googlePlus ir" data-network="google" data-shareurl="">Google+</a></li>
        <li><a href="" class="email ir" data-network="email" data-shareurl="">Email</a></li>
      </ul>
    </div>

Answer 1

您的图标淡出未被触发，因为它已从mouseenter事件淡入尚未完成。在fadeout动画上添加超时（持续时间）似乎可以解决它。

参见jsfiddle.net/BndxN/26 /

编辑 - 你可能想稍微调整一下超时时间。

Mouseenter事件在悬停时触发两次并触发mouseleave代码？

1 个答案: