jquery - 有延迟的动画

Question

我很难同时理解动画、延迟和文本有一个盒子，盒子里面写着“运动”，当点击它说的文本时

测试

不是在盒子里面，而是在盒子外面的某个地方。

单击后，我想要使用动画将框向左移动，完成动画后，将框内的文本从“运动”更改为“篮球”，然后将框向左移动。

我在这里编写了该代码，但使用延迟无法正常工作！

<div id="apDiv12"><h1 id="toptitle">sports</h1>​&lt;/div>

---

$(document).ready(function(){
$("p").click(function() {
 $('#apDiv12').animate({left:"200px"},3000).delay(1000);
 $('#toptitle:contains("Profil")').text("basketball");

});

});

请帮忙谢谢。

Answer 1

.delay仅适用于相同的动画队列。text更改不是同一队列的一部分。您可能希望使用该.animate方法的回调函数，如下所示：

.animate({left: "200px"}, 3000, function () { $("#toptitle" ...

有关更多详细信息，请参阅文档。

你也可以使用setTimeout.