jquery - Finish CSS Animation After Leaving Hover -

jquery - Finish CSS Animation After Leaving Hover -

i have bar flips vertically bluish grayness when hovered. when leaving hover, goes blue. great.

problem animation long on hover state. not finish animation if hover , "unhover" quick.

goal want flip bluish grayness , bluish if hovered split second. don't want animation stop when unhover.

attempts i've read can't done pure css.

i've tried adding next jquery code adds , removes animation class question: css3 animation on :hover; forcefulness entire animation:

$(".bar").bind("transitionend webkittransitionend otransitionend", function(){ $(this).removeclass("vflipper") }) $(".bar").hover(function(){ $(this).addclass("vflipper"); })

and changing css .vflipper .bar.vflipper, can't seem working code. ul , li's seem cause me issues. understand how works divs, not lists.

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

any help appreciated :)

## update ## i'm close fiddle: http://jsfiddle.net/zuhloobie/t9x723tq/8/ it's buggy though. when come in li left, flip gray, won't flip bluish when exit. when come in li top, right, or bottom...it doesn't flip grayness on hover, whole animation when exit. ideas?

you should seek type of code/syntax

$(document).ready(function(){ $('#bar').bind( "click transitionend webkittransitionend otransitionend", function() { // css doing flipping go here; // alert( "user clicked on bar" ); }); $('#bar').bind( "click transitionend webkittransitionend otransitionend", function() { // css returning/reversing flipper go here; // alert( "user clicked on bar" ); }); });

jquery html css