Question

当指针在DIV上时，我正在使用animate()为DIV标签设置动画。当指针离开DIV标签时，它会动画回原来的位置。这里的问题是动画在鼠标悬停时将DIV标签向左移动50像素，向右移动50像素。

即使动画未完成，这也会使DIV向右移动50个像素。

$('body').on('mouseenter', '.image-photo-previous', function() {
    $(this).animate({marginLeft: '-=50px'}, 300, 'swing');
});

$('body').on('mouseleave', '.image-photo-previous', function() {
    $(this).animate({marginLeft: '+=50px'}, {queue: false}, 300, 'swing');
});

http://jsfiddle.net/edgren/CubZy/

即使鼠标离开时动画未完成，如何让DIV标签动画回原始位置？

Answer 1

（没有JS！）您可以使用CSS3 transition：

来完成

的 DEMO (CSS only)

.image-photo-previous { background-color: #222222; height: 100px; width: 200px; transition: 0.3s; /* Transition! */ } .image-photo-previous:hover{ margin-left: -50px; }

使用jQuery：

的 LIVE DEMO

$(".image-photo-previous").on('mouseenter mouseleave', function( e ) { $(this).stop().animate({marginLeft: e.type=="mouseenter"?-50:0}, 300); });

.stop()方法会阻止一些丑陋的动画构建，并且有一点Ternary Operator (?:)你就是正确的方式。

您的示例不适合您的需求，因为在您添加到当前的+=和-=由于stop()和-50而导致的新增加的边际动画时，您正在搞乱一些新增加的边距计算DIV样式，特别是在快速鼠标移动时导致不正确的元素位置。 0清除该行为，您只需严格定义职位：{{1}}和{{1}}并将其绑定到当前事件。

Answer 2

试试这个：

$(document).ready(function() {

    $('body').on('mouseenter', '.image-photo-previous', function() {
        $(this).stop(true,true).animate({marginLeft: '-=50px'}, 300, 'swing');
    });

    $('body').on('mouseleave', '.image-photo-previous', function() {
        $(this).stop(true,true).animate({marginLeft: '+=50px'}, {queue: false}, 300, 'swing');
    });

});

详细了解.stop（）：http://api.jquery.com/stop/

Answer 3

的 `jsFiddle Demo` 的

如果您希望动画不被中断，那么您必须让jquery在其fx队列中管理它。你明确告诉它不要在这里：

{queue: false}

因此您需要将其更改为：

$(this).animate({marginLeft: '+=50px'}, {queue: true}, 300, 'swing');

然后它会等到动画离开队列开始下一个动画。

Answer 4

您可以将marginLeft重置为原始值，如果没有原始值，则重置为'。

另外，请在$(this).stop();中致电mouseleave取消之前的动画。

$(document).ready(function() {
    $('body').on('mouseenter', '.image-photo-previous', function() {
        startMargin = $(this).css('marginLeft');
        $(this).animate({marginLeft: '-=50px'}, 300, 'swing');
    });

    $('body').on('mouseleave', '.image-photo-previous', function() {
        $(this).stop();
        $(this).animate({marginLeft: ''}, {queue: false}, 300, 'swing');
    });
});

小提琴： http://jsfiddle.net/ExUzJ/2/

请告诉我这是否是您要找的内容。

Answer 5

参考：How do I find out with jQuery if an element is being animated?

您可以使用以下代码来确定是否正在应用动画

if( $('.image-photo-previous').is(':animated') ) {...}

如果是这样，您可以使用上面链接中的回调函数来等待（使用setTimeOut）或计算将div恢复到原始位置所需的预期边距像素

简单的DIV悬停动画

5 个答案:

的 `jsFiddle Demo` 的

简单的DIV悬停动画

5 个答案:

的 jsFiddle Demo 的

的 `jsFiddle Demo` 的