在相同的時間間隔上更改類名（懸停時）

Question

我想在用戶將鼠標懸停在div元素上時顯示一些動畫效果。有人可以爲我提供代碼片段嗎？

<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

試試這個代碼：

<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> 

這是jfiddle： http://jsfiddle.net/xDSaX/

你現在纔來設置類什麼你想..