在相同的时间间隔上更改类名（悬停时）

-1

我想在用户将鼠标悬停在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 
});

来源

2012-09-18 coure2011

你在c1，c2等类中有什么风格。你可以在没有类的情况下动画。 – saji89

我必须将背景位置从0px更改为200px至400px ... – coure2011

该位置是否为一系列值，在每次后续迭代中都会加上相同的值？像'200px'每次增加？ – saji89

试试这个代码：

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

你现在才来设置类什么你想..

来源

2012-09-18 06:37:01

this.addClass ----> [对象窗口]没有方法addClass – coure2011

我改变了我的代码，现在我使用更简单的功能，！ –

在相同的时间间隔上更改类名（悬停时）

回答

相关问题