悬停时jquery不完整的动画

Question

我正在为我的网站制作导航系统。我们的想法是在父母徘徊时显示内容。

但是，当内容快速悬停时，动画不完整，并且在两者之间停止。

完整的工作和代码在下面的演示链接中。有关更改代码的任何建议都会有所帮助。

DEMO：http://jsfiddle.net/vaakash/yH9GE/

  

当“两个”箭头同时盘旋时（从一个箭头快速移动）   箭头到另一个）他们停止并且不完整

我使用的代码是

$('.anpn-wrap').mouseenter(function(){           

    $wrap = $(this);
    $txt = $(this).find('.anpn-text');
    $cnt = $(this).find('.anpn-cnt');

    $txt.hide();
    $cnt.css({ 'opacity': 0, 'margin-top': '-50px', 'width': '200px' });
    $wrap.stop().animate({ 'width': $cnt.outerWidth() });
    $cnt.show().animate({ 'opacity': 1, 'margin': 0});

});

$('.anpn-wrap').mouseleave(function(){

    $wrap = $(this);
    $txt = $(this).find('.anpn-text');
    $cnt = $(this).find('.anpn-cnt');

    $cnt.show().stop().animate({ 'opacity': 0, 'margin-top': '-50px' }, function(){
        $cnt.hide();
        $wrap.stop().animate({ 'width': $txt.outerWidth() });
        $txt.fadeIn();
    });

});​

Answer 1

通过不本地化$wrap，$txt和$cnt，它们将是全局的，因此如果在较早的mouseleave动画完成之前发生了mousenter事件，这些变量将被覆盖并且第一个动画中的回调将解决其他按钮的元素。

解决方案是在两个处理程序中声明$wrap，$txt和$cnt var。

试试这个：

$('.anpn-wrap').mouseenter(function() {
    var $wrap = $(this).stop();
    var $txt = $wrap.find('.anpn-text').hide();
    var $cnt = $wrap.find('.anpn-cnt').css({
        'opacity': 0,
        'margin-top': '-50px',
        'width': '200px'
    }).show().animate({
        'opacity': 1,
        'margin': 0
    });
    $wrap.animate({
        'width': $cnt.outerWidth()
    });
}).mouseleave(function() {
    var $wrap = $(this);
    var $txt = $wrap.find('.anpn-text');
    var $cnt = $wrap.find('.anpn-cnt').show().stop().animate({
        'opacity': 0,
        'margin-top': '-50px'
    }, function() {
        $cnt.hide();
        $wrap.stop().animate({
            'width': $txt.outerWidth()
        });
        $txt.fadeIn();
    });
});

Answer 2

我不知道你想要什么，但你可以将参数传递给stop()来强制完成动画。

stop(true, true)

请参阅此版本：http://jsfiddle.net/yH9GE/2/