使用jQuery後執行CSS3動畫.appendTo

我想用.appendTo()來修改元素的DOM位置。一旦完成，我需要使用CSS3對元素進行動畫處理。使用jQuery後執行CSS3動畫.appendTo

該元素不會動畫，而是捕捉到新的CSS樣式。

的JavaScript：

$(".run").click(function() { 
    $(".imageOriginal").appendTo(".insert").toggleClass("imageAnimated"); 
});

HTML：

<div class="insert"> </div> 
<img src="img/img1.png" class="imageOriginal"/>

CSS：

.imageOriginal { 
    -webkit-transform: scale(0.1); 
} 
.imageAnimated { 
    -webkit-transition: all 1s ease-in-out;  
    -webkit-transform: scale(1); 
}

我分開的.appendTo()和.toggleClass()方法火在兩個不同的點擊事件。這種方法有效（但顯然不是理想的）。追加後我也嘗試使用.delay(1000)，但這也不起作用。

來源

2011-12-21 jaredrada

JQuery用戶界面提供.switchClass（）函數如下所述： http://stackoverflow.com/questions/1248542/jquery-animate-with -css-class-only-without-explicit-styles – Stephen 2011-12-21 19:42:29

@Stephen他們是否更新了jQuery UI以使用CSS3轉換？ – Jasper 2011-12-21 19:45:34

@Stephen請不要推薦整個（臃腫，垃圾）庫，只是爲了實現易於手工編寫的行爲的單個函數。 – Bojangles 2011-12-21 20:01:00

問題是您正在附加內容，然後同時切換類。如果您刪除.appendTo()調用它正常工作：

$(".imageOriginal").toggleClass("imageAnimated");

這裏是一個演示：http://jsfiddle.net/38FrD/1/

我真的不知道發生了什麼，但如果你看的圖像元素的螢火，你可以看到， transition即使指定了持續時間，獲取的財產的持續時間也爲0s。

另外.delay()只適用於隊列（如.animate()調用）。

UPDATE

如果你把一個setTimeout匿名函數內部.toggleClass()呼叫，則顯示爲所需的工作：

$(".run").click(function() { 
    var $this = $(".imageOriginal"); 
    $this.appendTo('.insert'); 
    setTimeout(function() { 
     $this.toggleClass("imageAnimated"); 
    }, 0); 
});

這裏是一個演示：http://jsfiddle.net/38FrD/2/

來源

2011-12-21 19:26:41 Jasper

謝謝我的印象.delay（）會延遲調用後發生的任何方法。仍然不知道如何解決這個問題 - 最後的手段是使用jQuery的.animate而不是CSS3 – jaredrada 2011-12-21 19:53:35

@porfuse只是好奇，爲什麼你將圖像附加到另一個元素？此外，我用適合您的解決方案更新了我的答案。 – Jasper 2011-12-21 19:54:42

我想在一個包裝的內部對一組圖像進行動畫處理，**除了被點擊的圖像有不同的動畫 - 所以我最終會使用$（this）。我將點擊的圖像附加到另一個div，以便我可以定位它併爲該特定圖像提供不同的動畫。 – jaredrada 2011-12-21 19:59:17

使用jQuery後執行CSS3動畫.appendTo

回答

相關問題