Question

I want to show some animation effect on a div element when a user is hovering it. Can someone provide me code-snippet for this?

<div id="myDiv" class="c1"></div>

js.code

$('#myDiv').hover(function(){
    //after each 400ms
    //when mouse over #myDiv class should increment from c1 > c2 > c3 > c4 >c5
    //acutally its from cn > cn+1
}, function(){
    //after each 400ms
    //when mouse out #myDiv class should decrement from c5 > c4 > c3> c2 > c1
    //actuall its from cn > cn-1
});

Answer 1

try this code:

   <script type="text/javascript">
$(document).ready(function(){
$('#myDiv').hover(function(){
    //after each 400ms
    //when mouse over #myDiv class should increment from c1 > c2 > c3 > c4 >c5
    //acutally its from cn > cn+1
    $(function() {
        var $target = $('#myDiv');
          var classes = ['c1','c2', 'c3', 'c4', 'c5'];
          var current = 0;

          setInterval(function() {
              if (current==4){
                clearInterval();
              }
              else{
                $target.removeClass(classes[current]);
                current = (current+1)%classes.length;
                $target.addClass(classes[current]);
                }
              }, 400); // 1500 ms loop

    });

}, function(){
    $(function() {
        var $target = $('#myDiv');
          var classes = ['c5', 'c4', 'c3', 'c2', 'c1'];
          var current = 0;

          setInterval(function() {
              if (current==4){
                clearInterval();
              }
              else{
                $target.removeClass(classes[current]);
                current = (current+1)%classes.length;
                $target.addClass(classes[current]);
                }
              }, 400); // 1500 ms loop
    });
});


});
</script>

This is the jfiddle:
http://jsfiddle.net/xDSaX/

You have only now to set the class what you want..