Question

我在span上制作了mouseOver四个top:20px，mouseOut和top:-20px动画回$(".pull_down").mouseover(function(){ $(this).animate({top:'20px'}); }); $(".pull_down").mouseout(function(){ $(this).animate({top:'-20px'}); });。

我写了这段代码：

span

所有pull_down都有相同的班级CSS style，其中包含此.pull_down { -webkit-msie-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); background:#900; color:#FFF; font-size:20px; text-transform:capitalize; font-weight:bold; padding:5px; position:absolute; border:#000 solid 2px; border-bottom-left-radius:10px; padding-right:100px; z-index:500; width:100px; } .pull_down:hover { cursor:pointer; }：

{{1}}

基本上这没用。

问题在于，如果鼠标在这些元素上传递超过1次，比如7次，那么这些动画就会排队，这看起来很尴尬

所以我想要的是当我将鼠标悬停在跨度上时会开始动画，当我切换到另一个跨度时，最后一个跨度将恢复到其位置。

一个例子是here

我还阅读了.stop()的相关帖子，但无法弄清楚如何执行此操作。

Answer 1

jQuery的一个很棒的属性是方法链，它允许对定时事件进行串行处理。

如果你使用.stop（）重写你的代码，你应该可以做到这一点。

喜欢这个

$(".pull_down").mouseover(function(){
    $(this).stop().animate({top:'20px'});  
});
$(".pull_down").mouseout(function(){
    $(this).stop().animate({top:'-20px'}); 
});

这将清除所选DOM对象的动画队列，然后立即添加要处理的动画。

要停止所有其他跨度，只需重复调用内部的选择器

$(".pull_down").mouseover(function(){
    $(".pull_down").stop();
    $(this).animate({top:'20px'});  
});
$(".pull_down").mouseout(function(){
    $(".pull_down").stop();
    $(this).animate({top:'-20px'}); 
});

Answer 2

使用 .stop( [clearQueue ] [, jumpToEnd ] )

$(".pull_down").mouseover(function(){
    $(this).stop(true, true).animate({top:'20px'});  
});
$(".pull_down").mouseout(function(){
    $(this).stop(true, true).animate({top:'-20px'}); 
});

在JQuery中开始下一个动画之前停止上一个动画

2 个答案: