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

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次,比如7次,那么这些动画就会排队,这看起来很尴尬

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

一个例子就在这里

我还阅读.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'}); 
});