2015-04-05 133 views
1

我有一個酒吧,徘徊時從藍色垂直翻轉到灰色。離開懸停時,它會回到藍色。大。離開懸停後完成CSS動畫

問題
,只負責動畫長不過你在它懸停狀態。如果你徘徊和「解除」真的很快,它不會完成動畫。

目標
我希望它從藍色翻轉到灰色和回藍,即使盤旋了一秒鐘。我不想讓動畫立即停止。

ATTEMPTS
我讀過,這不能用純CSS完成。

我試着加入以下的jQuery代碼,增加了從這個問題中刪除一個動畫類:css3 animation on :hover; force entire animation

$(".bar").bind("transitionend webkitTransitionEnd oTransitionEnd", function(){ 
$(this).removeClass("vFlipper") 
}) 
$(".bar").hover(function(){ 
$(this).addClass("vFlipper"); 
}) 

和更改.vFlipper的CSS來.bar.vFlipper,但我似乎無法到讓它與我的代碼一起工作。 UL和LI似乎總是會引起我的問​​題。我理解它如何與DIV一起工作,但與列表無關。

FIDDLE
http://jsfiddle.net/zuhloobie/t9x723tq/1/

任何幫助,將不勝感激:)

## UPDATE ##
我真的很接近這個小提琴:http://jsfiddle.net/zuhloobie/t9x723tq/8/

這是越野車,雖然。當您從左側輸入li時,它將翻轉爲灰色,但退出時不會翻轉回藍色。當您從頂部,右側或底部輸入li時,它在懸停時不會翻轉爲灰色,但會在您退出時執行整個動畫。想法?

回答

4

你應該試試這種類型代碼/語法

 
$(document).ready(function(){ 
    $('#bar').bind("click transitionend webkitTransitionEnd oTransitionEnd", function() { 
// css for doing flipping will go here; 
// alert("User clicked on bar"); 

}); 

$('#bar').bind("click transitionend webkitTransitionEnd oTransitionEnd", function() { 
// css for returning/reversing flipper will go here; 
// alert("User clicked on bar"); 

}); 

}); 
+0

感謝您回覆。如果我把這兩個語句放在一起,它不會只讀最後一個'('.bar')',因爲它正在被重複嗎?它也正在努力「點擊」,我需要它像我張貼的那樣停飛。看小提琴:http://jsfiddle.net/zuhloobie/t9x723tq/5/。它繞過第一個'('.bar')'因爲它被重複 - 但它仍然在運行它的完整動畫。感覺就像它接近... – chris 2015-04-06 04:17:15

+0

我已經把它與這個小提琴緊密關聯:http://jsfiddle.net/zuhloobie/t9x723tq/8/。 雖然它是越野車。有時它在第一次懸停時不會翻轉爲灰色,有時會發生,但在懸停時不會翻轉回藍色。而且這個bug是隨機的。想法? – chris 2015-04-06 06:24:13

+0

更奇怪的是什麼。如果您從頂部,右側或底部輸入每個「li」,則懸停時不會翻轉爲灰色,但會完成動畫。如果從左側輸入「li」,則懸停時會翻轉爲灰色,但不會完成動畫。沒頭緒? – chris 2015-04-06 06:30:37