jQuery的動畫不工作$（本）

-1

我試圖用.animate具備此功能的動畫一堆<div>的：

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才能將其恢復。代碼中導致此問題的錯誤在哪裏？另外，因爲我使用.css將活躍的li帶回來，所以它也不再以動畫形式出現。我很確定這與.clone方法有關。但是，怎麼樣，我無法確定。

來源

2012-04-18 amit

[Demo]（http://jsfiddle.net/）？ – 2012-04-18 20:37:25

您在標題中提及'$（this）'，但在代碼中沒有看到任何此類內容。 – Sparky 2012-04-18 20:49:54

這只是應用程序的一小部分。創建演示將非常困難。如果你需要澄清，請告訴我。 – amit 2012-04-18 20:50:49

很難說沒有一個適當的例子或一些相關的代碼，但我會說你的問題很可能是在這裏：

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")。

來源

2012-04-18 20:54:07 elclanrs

通過緩存，你的意思是？ – amit 2012-04-18 21:31:59

通過緩存我的意思是說，你將選擇器分配給一個變量，這種方式jQuery不會一直尋找你的元素。即'var $ wrapper = $（「＃contentWrapper」）'然後像'$ wrapper.doSomething（）'一樣使用它' – elclanrs 2012-04-18 21:34:22

首先，我會建議退後一步，簡化你從哪裏開始，然後一步一步走，以便知道問題何時開始。看看這個小提琴，它顯示問題可能源自像素，你應該使用百分比代替：http://jsfiddle.net/UVPYW/1/超出這個範圍，請確保你注意@elclanrs關於延遲的回答，但也要確保你沒有刪除或克隆你想要從屏幕上消失的原始元素。它看起來像在你的代碼中，你實際上刪除了首先被動畫化的#contentWrapper中的元素，當你嘗試重新創建動畫時，這會導致問題。如果你想在屏幕上設置一個NEW元素的動畫，請確保你在CSS中設置它爲負值。所以將其設置爲最初的-1000左右，並且當您設置動畫時，請確保它的左側值在屏幕上可見

來源

2012-04-18 21:26:23 Evan

jQuery的動畫不工作$（本）

回答

相關問題