Question

I’m using the CSS3 animations from Dan Eden.

I’m having troubles to work with jquery for hover or click events.

Here’s the fiddle I’m working on.

1. Notice the div falls off the screen with the animated hinge effect, but then it comes back to where it was. I would need to it fall off the screen permanently, or until one reloads the page.

2. The jquery snippet you see in there is just an alternative fallback I’ve been using since I can’t get jquery to work with CSS animations yet. (The snippet works on my site, but for some reason it doesn’t work in the fiddle.)

So how do I fire off the CSS animations using jquery click (or hover) events?

Once clicked, the div shouldn’t reappear.

Things I’ve tried:

jquery addClass, as per Dan’s suggestion:

Example given on the above page URL:

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

I’ve also tried changing the CSS3 .animated and .hinge to use :active, but no luck, and if I recall correctly, it was still putting the div back instead of letting it fall away permanently.

If someone could point me in a direction. I spend days trying to make the whole thing work. I’ve mostly been reading everything I can find on this subjects; I want to LEARN how to do this, and not just have it fixed for me.

If there’s any info I’m missing, I’m new to this forums so please go easy on me. 🙂

SOLUTION, SOLVED:

$('#pricetag_overlay1 a').click(function(){ 
            $('#pricetag_overlay1').toggleClass("animated hinge",function(){
               $(this).remove();
            });
        });       

Answer 1

I have updated your fiddle to work as you preferred

For monitoring CSS3 animation using jquery see this link.

Note:

$(window).load(function(){}) 

the above script will only fire on the initial page load

so prefer using

$(document).ready(function(){});