如何在多個元素上使用jQuery的animate（）延遲使用CSS'「rotateX（）」

我正在研究一個帶有多個六角形div的頁面佈局（基本使用的簡單教程可以從github上的jtauber獲得）排成三排（現在）。如何在多個元素上使用jQuery的animate（）延遲使用CSS'「rotateX（）」

我希望它只有左上角可見的六角形，而其他人在X軸上旋轉，所以他們不可見，當我點擊左上角的六角形，所有其他人開始旋轉「 3D樣」之一，另一個在固定時間間隔後，像這樣的：http://jsfiddle.net/76q2j/10/（在本例中，所有是可見的，rotateX()在CSS上:hover實施

到目前爲止，我的HTML看起來像這樣：

<div class="hex_grid"> 
    <!-- ROW 01 --> 
    <div class="hex_row impair"> 
     <div id="hex0101" class="hex"> 
     <div class="part top"></div> 
     <div class="part middle"></div> 
     <div class="part bottom"></div> 
    </div> 
    <div id="hex0102" class="hex"> 
     <div class="part top"></div> 
     <div class="part middle"></div> 
     <div class="part bottom"></div> 
    </div> 
    <div id="hex0103" class="hex"> 
     <div class="part top"></div> 
     <div class="part middle"></div> 
     <div class="part bottom"></div> 
    </div>

...等等。

的CSS是「隱藏」/rotateX從一開始的div是這樣的：

.hex:not(#hex0101){ 
    -webkit-transform: perspective(600px) rotateX(90deg); 
    -moz-transform: perspective(600px) rotateX(90deg); 
    -ms-transform: perspective(600px) rotateX(90deg); 
    -o-transform: perspective(600px) rotateX(90deg); 
    transform: perspective(600px) rotateX(90deg); 
}

最後，理想的jQuery的動畫整個事情會是這樣，或者類似的東西：

$("#hex0101").click(function(event) { 
    $('.hex:not("#hex0101")').each(function(i) { 
     $(this).delay(100*i).animate({transform: 'rotateX(90deg)'}); 
    }); 
});

但是，經過很多很多的試用和谷歌搜索之後，我在這裏發現，jQuery .animate()顯然不支持CSS3 transforms。

我設法六邊形通過簡單地使用任何其他類型的變換出現一前一後，像

$(this).delay(100*i).animate({transform: 'skew(100px)'});

...雖然轉型並沒有真正ocurr，我不知道爲什麼目前，他們只是彈出。

因爲我不能讓CSS」 transform: rotateX()發揮好與jQuery的animate()，我想，也許將與CSS過渡類會解決它，但你可以在這裏看到：

： http://jsfiddle.net/76q2j/13/我遇到兩個問題來了

動畫並沒有真正期待的那樣好，因爲它與CSS :hover做（也許只是我...）
它同時適用於額外的類六邊形所有，而不是一個接一個像我會想到

底線，或DL; DR，我想知道是否有人知道一個jQuery插件，可以讓你結合jQuery和「高級」CSS3 transforms或者如果有一個更簡單/更實用/通過each(function(i){...})一次申請額外的類到一個div。

任何幫助，高度讚賞！如果不清楚，我會添加更多信息，我昨晚睡得很少，所以我的大腦有點模糊......

來源

2014-02-12 kebarriere

如果你決定使用插件（雖然我不一定說它是必要的），我會推薦Transit http://ricostacruz.com/jquery.transit/。它在做基於CSS的轉換非常簡單方面做得非常出色。 –

謝謝，我會試試看！編輯：它看起來很有希望！ – kebarriere

其實，那正是我在找的！超級簡單，超級有效！再次感謝！ – kebarriere

我不知道如果這正是你想要的，但這裏的東西：

JsFiddle

總之你不需要的jQuery的CSS3過渡可以通過JS很容易觸發通過簡單地改變實際值：

elem.style.property = 'value'

這就是說，你可以得到所有你元素的列表與「getElementsByClassName方法」，並遍歷所有的人（跳過第一，從而在1 i開始），然後更改值。

既然你不想讓所有的人同時翻轉，我只是把代碼放在一個區間內，並使用被調用的函數來遞增i。

您還必須確保您停止了間隔並在處理完所有元素後移除「onclick」事件。

來源

2014-02-12 04:26:38

我剛剛意識到我完全忘了你的：懸停。這是一個編輯版本，奇怪的是，事件只在下半部觸發，我正在調查。 http://jsfiddle.net/76q2j/23/ –

谷歌給了我一個[答]（http://css-tricks.com/forums/topic/possible-webkit-bug-hover-area-on-items - 即，被內聯 - 嵌段 - 和 - 旋轉/）。修正了一些。我正在使用chrome，需要在其他瀏覽器中進一步測試。 –

Merci！我一直在尋找jQuery，因爲這是我更舒適的，但它完美的作品！ – kebarriere

如何在多個元素上使用jQuery的animate（）延遲使用CSS'「rotateX（）」

回答

相關問題