Question

我有以下内容：

$(document).mousemove(function(event) {   
    if (event.pageX == 0) {
        $("#nav").animate({
            marginLeft: '0px',
        });  
    }        
});

$("#nav").mouseleave(function(event) {   
    $(this).animate({
        marginLeft: '-220px',
    });      
    alert('hi');  
});

基本上我在网页的左侧有一个滑块。问题是.mouseleave（）它不会将滑块设置为-220px的动画。有时会这样，但它有一些延迟。它很奇怪，因为警报瞬间触发。我怎样才能改善这个？

Answer 1

问题是由于每次鼠标移过x = 0时，mouseMove事件都会排队一个动画。这导致所有这些动画在mouseleave动画生效之前运行完毕。

对此的一个简单修复是在运行.animate（）之前添加.stop（）调用。这将停止队列中的所有动画，以便.animate（）调用立即生效。

$(document).mousemove(function(event) {   
    if (event.pageX == 0) {
        $("#nav").stop().animate({
            marginLeft: '0px',
        });  
    }        
});

$("#nav").mouseleave(function(event) {
    $(this).stop().animate({
        marginLeft: '-220px',
    });
});

Answer 2

我会用新的方式：$( selector ).on( "mouseenter mouseleave", handlerInOut );

以下是FIDDLE：http://jsfiddle.net/mikea80/pmGfp/

以下是代码：

$('div').on( "mouseenter", function() {
     $('p').text('you are over');
});

$('div').on( "mouseleave", function() {
     $('p').text('you are out');  
});

希望这有帮助

Jquery .animate（）延迟.mouseleave（）

2 个答案: