0

当我将鼠标悬停在它们上时，我正在尝试制作 6 张 cd 图像以同时移动 35 像素和旋转 45 度。它有效，但有时当我离开悬停区域时，动画不会停止，有时它会在停止之前重复 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 回答