0

6 つの CD イメージを作成して、マウスを重ねると 35px 移動し、同時に 45deg 回転させようとしています。それは機能しますが、ホバー領域を離れるとアニメーションが停止しない場合があり、停止する前に6回または7回繰り返される場合があります...そして、理由がわかりません。これが私が行った唯一のクエリです私のファイル、どうすればいいですか？

ありがとう

CSS

#cd1 {
    left: 0px;
}
#cd2 {
    left: 40px;
}
#cd3 {
    left: 80px;
}
#cd4 {
    left: 120px;
}
#cd5 {
    left: 160px;
}
#cd6 {
    left: 200px;
}

html

<body>
    <div id="cd6"></div>
    <div id="cd5"></div>
    <div id="cd4"></div>
    <div id="cd3"></div>
    <div id="cd2"></div>
    <div id="cd1"></div>
</body>

jquery

var cds = ['#cd1', '#cd2', '#cd3', '#cd4', '#cd5', '#cd6'];
var pos_init = ['0', '40', '80', '120', '160', '200'];
$(cds).each(function(i) {
    $(cds[i]).hover(
        function() {
            var esquerda = parseInt(pos_init[i]);
            $(this).animate({left: (esquerda + 35) + 'px'}, 'slow');
            $(this).css({'-webkit-transform' : 'rotate(45deg)'});
        },
        function() {
            var esquerda = parseInt(pos_init[i]);
            $(this).animate({left: (esquerda) + 'px'}, 'slow');
            $(this).css({'-webkit-transform' : 'rotate(0deg)'});
        }
    );
});
4

2 に答える 2

1

アニメーションの前に.stop（）関数を追加してみてください。

var cds = ['#cd1', '#cd2', '#cd3', '#cd4', '#cd5', '#cd6'];
var pos_init = ['0', '40', '80', '120', '160', '200'];
$(cds).each(function(i) {
    $(cds[i]).hover(
        function() {
            var esquerda = parseInt(pos_init[i],10);
            $(this).stop().animate({left: (esquerda + 35) + 'px'}, 'slow');
            $(this).css({'-webkit-transform' : 'rotate(45deg)'});
        },
        function() {
            var esquerda = parseInt(pos_init[i]);
            $(this).stop().animate({left: (esquerda) + 'px'}, 'slow');
            $(this).css({'-webkit-transform' : 'rotate(0deg)'});
        }
    );
});​
于 2012-04-18T16:04:28.410 に答える
1 
var cds = ['#cd1', '#cd2', '#cd3', '#cd4', '#cd5', '#cd6'];
var pos_init = ['0', '40', '80', '120', '160', '200'];
$(cds).each(function(i) {
        $(cds[i]).hover(function() {
            var esquerda = parseInt(pos_init[i]);
            $(this).stop(true, true).animate({left: (esquerda + 35) + 'px'}, 'slow');
            $(this).css({'-webkit-transform' : 'rotate(45deg)'});
        },
        function() {
            var esquerda = parseInt(pos_init[i]);
            $(this).stop(true, true).animate({left: (esquerda) + 'px'}, 'slow');
            $(this).css({'-webkit-transform' : 'rotate(0deg)'});
        }
    );
});​
于 2012-04-18T16:07:03.890 に答える