Question

我正尝试使用此功能为<div> .animate设置动画：

slideOut: function(container){
    var count = container.siblings().size() - 1;
    container.siblings().each(function(index, item){
        $(item).delay( index * 50 ).animate({ "left" : "-1000px" }, "fast", function(){
            if (index == count){
                container.delay(container.parent().parent().children().size() > 10 ? 10 * 50 + 300 : container.parent().parent().children().size() * 50 + 300  ).animate({ "left":"-1000px" }, "fast", function(){
                    container.parent().parent().clone(true, true).appendTo(metro.tiles);
                    metro.overlay(container.parent().parent().parent());
                }); 
            }       
        });
    });

},

我正在使用以下函数将它们带回DOM：

slideInTiles: function(){
    $("#contentWrapper").empty();
    $("#contentWrapper").append(metro.tiles.children());

    $("#contentWrapper li").animate({"left": "0px"}, "fast");
    $("#contentWrapper li.activeTile").css({"left": "0px"}, "fast");
},

但问题是，我点击的<li>没有动画回到混音中。我必须使用.css将其恢复。导致此问题的代码中的错误在哪里？此外，由于我使用li将活动的.css带回来，因此它不再在视图外生动。我很确定这与.clone方法有关。但是如何，我无法想象。

Answer 1

如果没有正确的示例或更相关的代码，很难说，但我会说你的问题可能在这里：

container.delay(container.parent().parent().children().size() > 10 ? 10 * 50 + 300 : container.parent().parent().children().size() * 50 + 300).animate({

delay()仅适用于队列，您在启动任何队列之前都在使用它。然后，必须有一个比container.parent().parent().children().size()更好的选择器...
此外，您可能希望使用length而不是size()。 size()只是一个返回length的快捷方式。最后，我会缓存所有这些选择器，以便您的应用程序可以更快地执行，即。可以缓存$("#contentWrapper")。

Answer 2

首先，我建议您退后一步，简化您的工作并逐步进行，以便了解您的问题何时开始。看看这个小提琴，它表明问题可能源于使用像素，你应该使用百分比代替：http://jsfiddle.net/UVPYW/1/除此之外，请确保你注意@elclanrs关于延迟的答案，同时也要确保你是不要删除或克隆要从屏幕上移除的原始元素。在你的代码中看起来你实际上删除了#contentWrapper中首先被动画化的元素，当你尝试重新设置它时会产生问题。如果要在屏幕上为新元素设置动画，请确保在css中设置它以使其具有负值。所以将它设置为最初为-1000左边，当你设置动画时，请确保它显示在屏幕上可见的左侧值

jQuery动画不工作$（this）

2 个答案: