javascript - 以相等的时间间隔更改类名（悬停时）

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/

你现在只需要设置你想要的类..