jQuery的：等待CSS動畫改變另一個CSS屬性

我有堆棧中的圖像，絕對定位在同一個地方，我只能通過設置有一個圖像在同一時間可見zIndex的= -1的所有圖像，但前完成可見的一個。在頁面的另一面，我有一個所有圖像名稱的列表，當我將鼠標懸停在特定圖像名稱上時，我希望該圖像通過淡入而變得可見，並且先前可見的圖像將淡出。我用這個代碼來做這件事jQuery的：等待CSS動畫改變另一個CSS屬性

$(this).hover( //visible and hover below are variable names 
     visible.css({opacity: '0',zIndex: '-1'}); //the previous image diassapears 
     hovered.css({ zIndex: '1', opacity: '1'}); //the new image fades in 
    )

並通過CSS轉換不透明屬性。的問題是，當我將鼠標懸停在一個新的形象名稱，舊的圖像就會消失無淡出，而新的開始褪色。我想，舊的圖像確實淡出，但它在適當的背景下這樣做到zIndex = -1即刻生效。我想問問最好的解決方法。請注意，我想要做到這一點，而不使用jQuery動畫，只使用純CSS動畫只是爲了利用（最低限度）更高的css動畫速度。所以一個幾乎沒有計算開銷的解決方案（這樣在這種情況下css動畫仍然是有利的）將是更可取的。

來源

2012-05-02 Nikolaos Kakouros

你需要應用z-index:-1它動畫回不透明度0後，否則就是「彈出「而不顯示不透明度變化。

你需要觸發一個事件transitionEnd。請參閱this SO post，瞭解有關所有瀏覽器正常化該事件的信息。

但是，一旦你的工作說出來，它基本上只是附加一個一次性事件與回調設定最終的z-index - 這樣的事情：

visible.one('transitionEnd', function(){ 
    visible.css('z-index', -1); 
}).css('opacity', 0);

你只需要使用腳本中的其他SO帖子，以獲得您的正常化'transitionEnd'事件。

希望這會有所幫助！

來源

2012-05-02 23:59:36 sic1

太好了。但是，任何計算負擔呢？此方法是否仍然呈現css轉換比jQuery動畫更快？ –

好吧，通過運行一個css過渡，動畫現在是硬件加速的 - 所以它看起來更好。我認爲他們看起來好多了。我沒有特別遇到這個方法的性能問題，它確實應該比只做一個jQuery動畫更好，因爲jQuery動畫只是設置不透明度的css來使它動畫--css轉換由瀏覽器處理本身，使其更加流暢。 – sic1

我想一個更好的問題是，您（或您的客戶）將被打破，如果你的動畫不會在IE7工作，8。如果這是一個問題，您可能需要使用jquery動畫或考慮進一步polyfills - 我有如果您在不支持轉換事件的舊瀏覽器上，則會看到一些將填充setTimeout以運行轉換回調。 – sic1

使用animate - 它與隊列管理和回調支持「開箱即用」

來源

2012-05-02 23:51:21

我覺得animate（）使用jQuery動畫，不是嗎？我想使用本機的CSS轉換。 –

jQuery的：等待CSS動畫改變另一個CSS屬性

回答

相關問題