2

我已经制作了四个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()的相关帖子，但无法弄清楚如何做到这一点。

4

2 回答 2

5

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'}); 
});
于 2013-06-30T18:44:09.150 回答
0

使用.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'}); 
});
于 2013-06-30T18:38:12.343 回答