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);
    });
});

jQuery - 让.animate和.html很好地发挥

1 个答案: