Using Animate.css with hover

Question

Using Animate.css with hover

Navigation

#1 by (4 votes)

0

DESCRIPTION:
I'm trying to use Animate.css in my project, but I'm kind of lost, I do not understand anything by jQuerry.

PROBLEM:
GitHub does not work, I know that something is missing but I do not know how to proceed.

I have imported css in my code
The objects to be animated already have their markings done

But I have some doubts, like:

Where do I put this code that is provided in the github tutorial? $('#yourElement').addClass('animated bounceOutLeft'); , do I put it inside a tag script, without any Function ? and if you have functoin, what function do I call?

Follow the link in JSFiddle
Note: I could not attach the animated.css via cdn

css3 jquery-animate animate.css

asked by anonymous 01.12.2014 / 21:59

1 answer

Timeout while getting a connection from pool How do I get the next ID to be inserted?

score 4 · Accepted Answer

As it is an animation, the cool thing is that it should appear when an event happens, so in the animate.css git repository there is an example:

$('#yourElement').addClass('animated bounceOutLeft');

That is, you will execute this line when an event happens. As you requested that the event be hover this is the code to put inside a script tag:

<script>
    $('#flipCard')
      .mouseover(function(){
        $('#flipCard').addClass('animated flipInX');  
      })
      .mouseout(function(){
        $('#flipCard').removeClass('animated flipInX');  
      });
</script>

This code snippet adds the class when you mouse over and removes class when the mouse exits.

The effect used was flipInX. But there are others like flipInY, flipOutX, flipOutY.

The animation speed can be set in a css:

#flipCard {
 -vendor-animation-duration: 3s;
 -vendor-animation-delay: 2s;
 -vendor-animation-iteration-count: infinite;
}

Just change vendor to the prefix you want (webkit, moz, o)

Follow the JSFiddle .