Question

I got a red square (DIV) and everytime I click on it I like it to fade in and out using CSS animation.

<div id="BLOCK" style="background-color:red;width:150px;height:150px;">RED SQUARE</div>

<script>$('#BLOCK').click( function() {} );</script>

When I hang the animation to a class such a fade it works:

<script>$('#BLOCK').click( function() { $('#BLOCK').addClass('fade'); } );</script>

But once I click again, nothing happened, which is pretty logic because the class is already added. But this does not work.

<script>$('#BLOCK').click( function() { $('#BLOCK').removeClass('fade'); $('#BLOCK').addClass('fade'); } );</script>

So does anyone know of a better way?

Answer 1

made a quick example:

http://jsfiddle.net/Uc8vn/

$(function(){
    $('a').click(function(ev){
       $('div').toggleClass('fade'); 
        ev.preventDefault();
    });
});​

div{
    transition:opacity .3s linear;   
    -moz-transition:opacity .3s linear;   
    -webkit-transition:opacity .3s linear;   
    opacity:1;
    width:100px;
    height:100px;
    background:red;
}
div.fade{
    opacity:0;   
}
​