mouseleave处理程序在jQuery中拖动后停止工作

Question

我正在使用一些jQuery创建衰落翻滚效果，但是在执行单击和拖动操作后，我遇到了按钮行为的问题。

<div id="splash_buttons"> 
    <a id="our_projects_button" href="#work"> 
     Our Projects 
     <div class="normal"></div> 
     <div class="hover"></div> 
    </a> 
</div> 

有迹象表明，淡入淡出创建悬停褪色两个不同的div。除非单击，拖动，释放鼠标，然后再次移动鼠标，否则该效果非常有效，悬停状态不会消失。当你点击时，活动状态会显示出来。在拖动期间它将一直保留，直到释放鼠标按钮。然后它将恢复到悬停状态并最终退回到正常状态。之后，如果将鼠标悬停在按钮上，它将按照预期激活悬停状态，但在离开按钮时不会停止悬停状态，除非您再次单击该按钮。

$('#splash_buttons a, #work_buttons a').live('mouseenter', function() { 
      $(this).find('.hover').fadeIn(hoverFadeTime); 
}).live('mouseleave', function() { 
      if(!isMouseDown) { 
       $(this).find('.hover').stop().fadeOut(hoverFadeTime); 
      } 
}).live('mousedown',function() { 
      isMouseDown = true; 
      $(this).find('.normal').hide(); 
}).live('mouseup', function() { 
      isMouseDown = false; 
      $(this).find('.normal').show(); 
      $(this).find('.hover').stop().fadeOut(hoverFadeTime); 
}).on('dragend', function() { 
      $(this).find('.normal').show(); 
      $(this).find('.hover').stop().fadeOut(hoverFadeTime); 
}); 

我不知道，如果这事做的事实，正常和悬停状态由jQuery和活动状态的处理仅仅是一个CSS规则。有人能帮忙吗？谢谢！

#our_projects_button { 
    float: left; 
    position: relative; 
    left: -6px; 
    width: 173px; 
    height: 53px; 
    margin: 0 20px 0 0; 
    text-indent: -9999px; 
} 

#our_projects_button .normal { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 173px; 
    height: 53px; 
    background: url('img/our_projects_sprite.png') transparent 0 0 no-repeat; 
} 

#our_projects_button .hover { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 173px; 
    height: 53px; 
    background: url('img/our_projects_sprite.png') transparent 0 -53px no-repeat; 
} 

#our_projects_button .hover:active { background-position: 0 -106px; } 

Answer 1

如果你改变你的dragend代码

.on('dragend', function() { 
    $(this).find('.normal').show(); 
    $(this).find('.hover').stop().fadeOut(hoverFadeTime); 
    isMouseDown = false; 
});