3

当指针位于 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 标签动画回其原始位置？

4

5 回答 5

4

（没有 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 (?:)你在正确的道路上。

您的示例不适合您的需求，因为在任何新事件中，您都在弄乱一些新添加的边距计算（对于未结束的动画）+=，因为-=这些边距计算已添加到当前 DIV 样式中，导致元素位置不正确，特别是在快速鼠标移动时。stop()清除该行为，您所需要做的就是严格定义位置：-50并将0它们绑定到当前事件。

于 2013-04-21T22:45:11.193 回答
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/

于 2013-04-21T22:42:38.607 回答
0

jsFiddle Demo

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

{queue: false}

所以你需要把它改成这样：

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

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

于 2013-04-21T22:41:39.570 回答
0

如果没有原始值，您可以将 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/

让我知道这是否是您正在寻找的东西。

于 2013-04-21T22:46:53.417 回答
0

参考： 如何使用 jQuery 找出元素是否正在动画？

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

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

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

于 2013-04-21T22:47:13.933 回答