javascript - jQuery 一个接一个地链接动画

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

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

$('#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();
        });
    });