CODEWITHSUNDEEP
jqueryhtmlcss
chris
chris

Reputation: 597

Finish CSS Animation After Leaving Hover

I have a bar that flips vertically from blue to gray when hovered. When leaving hover, it goes back to blue. Great.

PROBLEM
It only does the animation for however long you are on its hover state. It does not finish the animation if you hover and "unhover" really quick.

GOAL
I want it to flip from blue to gray and back to blue even if hovered for a split second. I don't want the animation to immediately stop when you unhover.

ATTEMPTS
I've read that this can't be done with pure CSS.

I've tried adding the following jquery code that adds and removes an animation class from this question: css3 animation on :hover; force entire animation:

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

And changing the CSS for .vFlipper to .bar.vFlipper, but I can't seem to get it working with my code. UL and LI's seem to always cause me issues. I understand how it works with DIVs, but not with lists.

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

Any help would be appreciated :)

## UPDATE ##
I'm really close with this fiddle: http://jsfiddle.net/zuhloobie/t9x723tq/8/

It's buggy though. When you enter the li from the left, it will flip to gray, but won't flip back to blue when you exit. When you enter the li from the top, right, or bottom...it doesn't flip to gray on hover, but it will do the whole animation when you exit. Ideas?

Upvotes: 1

Views: 703

Answers (1)

Rakshit Shah
Rakshit Shah

Reputation: 438

You should try this type of code/syntax

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

});

});

Upvotes: 3

Related Questions