javascript - jQuery - 让 .animate 和 .html 玩得很好

Question

我试图不嵌套这些语句：

$('#capePowerpoint').animate({"right": "+=498px"}, 1000);
$('#capePowerPointContainer').html(capTabArray[capTabCounter][capabilitiesCounter]);
$('#capePowerpoint').animate({"right": "-=996px"}, 0);
$('#capePowerpoint').animate({"right": "+=498px"}, 1000);

如果我注释掉 .html 行或 .animate 行，它们可以正常工作，但是当我尝试像这样组合它们时，它们只会从 div 中删除所有内容。而不是将 div 滚动到屏幕上替换它，然后从另一侧滚动回来。

Answer 1

您需要在animate调用中声明回调方法！

$('#capePowerpoint').animate({"right": "+=498px"}, {duration:1000,complete:function(){
    $('#capePowerPointContainer').html(capTabArray[capTabCounter][capabilitiesCounter]);
    $('#capePowerpoint').animate({"right": "-=996px"}, {duration:0,complete:function(){
        $('#capePowerpoint').animate({"right": "+=498px"}, 1000);
    });
});

查看更多：http ://api.jquery.com/animate/

如果你太喜欢 jQueryanimate方法，像我一样（我讨厌它），请参阅 GreenSock 的 TweenLite 库：

http://www.greensock.com/v12/

编辑：您应该保存元素而不是到处查询

var cape = $('#capePowerpoint'), container = $('#capePowerPointContainer');
cape.animate({"right": "+=498px"}, {duration:1000,complete:function(){
    container.html(capTabArray[capTabCounter][capabilitiesCounter]);
    cape.animate({"right": "-=996px"}, {duration:0,complete:function(){
        cape.animate({"right": "+=498px"}, 1000);
    });
});