Question

我有一个向下滑动的搜索栏，当按下按钮时会向下滑动，当你模糊场地时会向上滑动。但是当字段处于焦点时单击按钮会出现问题。它将触发幻灯片动画，当第一个动画完成时，它将跟随滑动动画。

$('#button').click(function(){
    $('.bar').animate({
        marginTop: "0"
    }, function(){
        $('.bar input').focus();
    })
})

$('.bar input').blur(function(){
    $('.bar').animate({
        marginTop: "-2em"
    })
})

这是一个例子。

http://jsfiddle.net/mattcoady/6ncER/1/

打开菜单工作正常，单击白色空间工作正常。菜单打开时单击按钮会导致动画在第一个之后触发。我该如何防止这种情况发生？

Answer 1

使用课程指定菜单是上升还是下移：

$('#button').click(function(){
    var $bar = $('.bar');
    var isUp = $bar.hasClass('up');
    var isAnimating = $bar.is(':animated');

    // Either this menu is already down or it's animating, 
    // so don't register the click
    if(!isUp || isAnimating) {
        return;    
    }

    // Slide down the menu 
    $bar.removeClass('up').animate({
        marginTop: "0"
    }, function(){
        $('.bar input').focus();
    })
})

Fiddle

Answer 2

如果元素是动画的，你可以取消逻辑：{如果我得到你想要的东西？！}

DEMO

if($('.bar').is(':animated'))return;

jQuery Blur Animate和Click冲突

2 个答案: