Question

我正在试着把文字“嘿，我很无光泽”。并将其从页面上反弹，然后将其更改为“Matt lastName”一旦不可见，然后在更改后反弹回到其他位置。

的jQuery

$('#about').click(function() {
    $('a#name').animate({'left' : '52%'});
    $('a#name').animate({'left' : '-53%'});
    /*$('a#name').animate({'text' : 'Matt lastName'}); -- doesnt work */
    $('a#name').animate({'top': '60px' });
    $('a#name').animate({'left' : '20px'});
    $('a#name').animate({'left' : '-=10px'});

     });

如果我使用（“a＃name”）。css（“text”，“Matt lastName”）;当我点击时，文本会改变。有没有办法让.cc在运行之前等待之前的动画调用完成？

Answer 1

您好，如果您需要知道.animate何时完整使用此语法

$('a#name').animate({'left' : '52%'}, function() {
// Animation complete.
});

或者如果您想设置持续时间

$('a#name').animate({'left' : '52%'}, duration, function() {
// Animation complete.
});

Answer 2

当元素位于视口之外时，您需要更改文本。为此，请使用$.fn.animate方法的完整回调：

＆＃13;

$('#about').click(function () {
    $('a#name')
    .animate({left: '52%'})
    .animate({left: '-53%'}, function() {
        $(this).text('Matt lastName');
    })
    .animate({top: '60px', left: '20px'})
    .animate({left: '-=10px'});
});

＆＃13;

#name {
    position: absolute;
    top: 60px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="about">About</button>
<a id="name">Hey, I'm matt.</a>

＆＃13;

将animate方法链接起来也更好，这样您就不会为a#name元素重新查询DOM，从而略微提升性能。

在animate（）完成后更改属性

2 个答案: