Using Animate.css with Hover

Asked

Viewed 2,151 times

0

DESCRIPTION:
I’m willing to use the Animate.css in my project, but I’m a little lost, I don’t know anything about jQuerry.

PROBLEM:
I did the step as it says on Github but it doesn’t work, I know something is missing but I don’t know how to proceed.

  • I have imported css in my code
  • The objects to be animated are already marked

but I have some questions, like,:

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

  • How do I make this function to animate is activated when giving?

Follows link on Jsfiddle
Note: I couldn’t attach Animated.css via Cdn

css3 jquery-animate animate.css

  • Can you put your code in a jsFiddle and explain what you want to do with animation and which element? so we can better understand your problem...

  • So Vinicius. I think since it is element of Jquery, should put in a Function. Try to put and see if it works. If not, post jsFiddle pro staff help !

  • Edited question with the link to the fiddle

1 answer

4


Since it’s an animation, the cool thing is that it appears when an event happens, so in the git repository of Animate.css is the example:

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

That is, you will run this line when an event takes place. How did you request the event to be Hover this there the code to be placed inside a tag script:

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

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

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 the vendor by the prefix you want (Webkit, Moz, the)

Follows the Jsfiddle.

Browser other questions tagged css3 jquery-animate animate.css

You are not signed in. Login or sign up in order to post.