.mouseleave（）上的Jquery.animate（）延迟

我有以下资料：

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

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

---

基本上，我有一个滑块出现在网页的左侧。问题是在.mouseleave（）上，它不会将滑块动画设置回-220px。有时是这样，但有一些延迟。这很奇怪，因为警报会立即触发。如何改进这一点？

我将使用新方法：

$（选择器）

这是小提琴：

代码如下：

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

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

希望这对您有所帮助
这个问题是因为每次鼠标移动到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',
    });
});

一个jsfiddle.net示例最好包括您的html和css