Закончить анимацию CSS после ухода на посадку

Question

У меня есть панель, которая переворачивается вертикально от синего до серого при зависании. При выходе из режима наведения он возвращается к синему. Отлично.

ПРОБЛЕМА
Это только делает анимацию для сколь угодно долго вы на его парения состоянии. Это не завершает анимацию, если вы наведете и «откройте» действительно быстро.

ЗАДАЧА
Я хочу, чтобы переворачивать от синего до серого и обратно к синему, даже если зависли на долю секунды. Я не хочу, чтобы анимация сразу же останавливалась, когда вы отключаетесь.

ПОПЫТКИ
Я читал, что это не может быть сделано с чистым CSS.

Я попытался добавить следующий код JQuery, который добавляет и удаляет класс анимации из этого вопроса: css3 animation on :hover; force entire animation:

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

И изменения CSS для .vFlipper к .bar.vFlipper, но я не могу показаться, заставить его работать с моим кодом. UL и LI, похоже, всегда вызывают у меня проблемы. Я понимаю, как это работает с DIV, но не со списками.

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

Любая помощь будет оценена :)

## ОБНОВЛЕНИЕ ##
Я очень близок с этой скрипкой: http://jsfiddle.net/zuhloobie/t9x723tq/8/

он ошибочен, хотя , Когда вы введете li слева, он перевернется на серый, но при выходе вы не вернетесь в синий цвет. Когда вы вводите li сверху, справа или снизу ... он не переворачивается до серого при наведении курсора, но при выходе вы будете делать всю анимацию. Идеи?

Answer 1

Вы должны попробовать этот тип кода/синтаксис

 
$(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"); 

}); 

});