Question

我正在使用以下功能来增大文本框并在焦点上显示提交按钮并缩小并隐藏模糊按钮。

但是在动画完成之前按钮会显示和隐藏。

我希望创建一个整洁的向下滑动并向上滑动动画。

$('#venue-write-review').focus(function() {
    $(this).animate({ height: '96px' }, 500);
    $('#submit-review').show();
});
$('#venue-write-review').blur(function() {
    $(this).animate({ height: '48px' }, 500);
    $('#submit-review').hide();
});

Answer 1

您可以指定动画完成后要执行的animate函数的回调。

$('#venue-write-review')
    .focus(function() {
        $(this).animate({ height: '96px' }, 500, function () {
            $('#submit-review').show();
        });
    })
    .blur(function() {
        $(this).animate({ height: '48px' }, 500, function () {
            $('#submit-review').hide();
        });
    });

Answer 2

您可以使用complete回调。查看docs（选项部分下的）：

动画完成后调用的函数。

像这样：

$('#venue-write-review').focus(function() { $(this).animate({ height: '96px' }, { duration: 500, complete: function() { $('#submit-review').show(); } } }); }); $('#venue-write-review').blur(function() { $(this).animate({ height: '48px' }, { duration: 500, complete: function() { $('#submit-review').hide(); } } }); });

Answer 3

这就是你所需要的所有_{并且不要忘记使用.stop()！}

$('#venue-write-review').on('focus blur',function(e){
    $(this).stop().animate({ height: e.type[0]=="f"?96:48 }, 500, function(){
         $('#submit-review').toggle();
    }); 
});

e.type[0]=="f"我只是检查条件运算符（？:) ，如果传递的事件的第一个[0]字符是f（焦点< / em>;否则逻辑上它是模糊）

阅读有关这些方法的 jQuery 文档：.on()，.toggle()，stop() .animate() callback以及 MDN 网站阅读条件运算符

同样在jQuery中，如果您不需要按%或其他一些措施制作动画，则无需指定'px'，因为它是默认设置。

jQuery Chaining动画一个接一个

3 个答案: