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

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 事件中淡入尚未完成。在淡出动画上添加超时（在时间持续时间内）似乎可以解决它。

见 jsfiddle.net/BndxN/26/

编辑 - 您可能需要稍微调整超时持续时间。