Question

当我将鼠标放在它们上面时，我正在尝试制作6张cd图像以移动35px并同时旋转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)'});
        }
    );
});

Answer 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)'});
        }
    );
});

Answer 2

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)'});
        }
    );
});

jquery元素有时不会在停留时停止

2 个答案: