Javascript jQuery链接动画一个接一个

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

但该按钮在动画完成之前显示和隐藏

我期待着创建一个整洁的幻灯片下降和幻灯片上升动画

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

---

您可以使用

complete

回调。检查（在选项部分下）：

动画完成后要调用的函数

像这样：

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

---

您可以使用

complete

回调。检查（在选项部分下）：

动画完成后要调用的函数

像这样：

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

---

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

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

---

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

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

这就是您所需要的，不要忘记使用

.stop（）

e.键入[0]==“f”

ij，以便在传递的事件的第一个

[0]

字符是

f

（焦点；否则逻辑上是模糊的）时检入条件运算符（？：）

阅读有关方法的jQuery文档：

.on（）

，

.toggle（）

，

stop（）

.animate（）callback，并在MDN网站上阅读有关条件运算符的内容

同样在jQuery中，如果您不需要按

%

或其他方式设置动画，则不需要指定

'px'

，因为这是默认设置。

这就是您所需要的，不要忘了使用

.stop（）

e.键入[0]==“f”

ij，以便在传递的事件的第一个

[0]

字符是

f

（焦点；否则逻辑上是模糊的）时检入条件运算符（？：）

阅读有关方法的jQuery文档：

.on（）

，

.toggle（）

，

stop（）

.animate（）callback，并在MDN网站上阅读有关条件运算符的内容

---

同样在jQuery中，如果您不需要按

%

或其他度量设置动画，则不需要指定

'px'

，因为这是默认设置。

animate接受完整回调，选中DOCanimate接受完整回调，选中DOCcache您的

$（“#提交审核”）

选择器缓存您的

$（“#提交审核”）

选择器