javascript - 等間隔でクラス名を変更する（ホバー時）

Question

ユーザーがdiv要素にカーソルを合わせたときに、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/

あなたは今、あなたが望むものをクラスに設定する必要があります。