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/

如果您太喜欢 jQuery animate 方法，就像我一样(我讨厌它)，请参阅 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);
    });
});