1

所以今天我想做一个简单的动画，当我将鼠标悬停在按钮上时按钮会变大，当我将鼠标从按钮上移开时会缩小。我尝试使用这个简单的 JQuery 代码，但问题是，如果我将动画速度放慢，则多次打开和关闭按钮会创建多个动画队列，这将在我的鼠标已经离开按钮后运行很长时间.

如果鼠标离开按钮，有没有办法在缩小队列后杀死队列？显然我想在按钮收缩后终止队列以使动画生效。

相关HTML：

<div id="global-nav">
    <ul id="top-nav">
        <li class="nav-list"><a class="nav" href="http://images6.fanpop.com/image/photos/33400000/Cats-cats-33441067-1280-800.jpg">Link1</a></li>
        |
        <li class="nav-list"><a class="nav" href="http://images4.fanpop.com/image/photos/16100000/-cats-16140154-1920-1080.jpg">Link2</a></li>
        |
        <li class="nav-list"><a class="nav" href="http://learningfromdogs.files.wordpress.com/2010/09/cats-in-sink.jpg">Link3</a></li>
        |
        <li class="nav-list"><a class="nav" href="http://25.media.tumblr.com/55b8c778e82b28aef27be5d6da8eaa7e/tumblr_meysfu2tM91qzv52ko1_500.jpg">Link4</a></li>
    </ul>   
</div>

相关的 JavaScript：

$(document).ready(function() {
    $(".nav").mouseover(function() {
        $(this).animate({
            paddingTop:'6px',
            paddingRight:'4px',
            paddingBottom:'6px',
            paddingLeft:'4px'
        },"slow");  
    }).mouseout(function() {
        $(this).animate({
            paddingTop:'3px',
            paddingRight:'2px',
            paddingBottom:'3px',
            paddingLeft:'2px'
        },"slow");
    });
});

JSFiddle：http: //jsfiddle.net/76tna/

请原谅其他 CSS、cat 文本和 HTML。我指的是导航栏中的按钮。（如果你好奇，这是给我妹妹的。）

4

3 回答 3

2

您需要.stop()在开始下一个动画之前播放当前动画，否则它将按照您当前观察的方式排队。

于 2013-06-12T04:55:46.837 回答
1

试试这个小提琴

您需要使用该stop功能，但如果您查看文档，您会发现您必须记住输入true该功能以清除队列，因为它默认为 false。

$(document).ready(function() {
    $(".nav").stop(true).mouseenter(function() {
        $(this).animate({
            paddingTop:'6px',
            paddingRight:'4px',
            paddingBottom:'6px',
            paddingLeft:'4px'
        },"slow");  
    }).mouseout(function() {
        $(this).stop(true).animate({
            paddingTop:'3px',
            paddingRight:'2px',
            paddingBottom:'3px',
            paddingLeft:'2px'
        },"slow");
    });
});
于 2013-06-12T05:03:37.520 回答
0 
$(document).ready(function() {
    $(".nav").mouseover(function() {
        $(this).css({
            paddingTop:'6px',
            paddingRight:'4px',
            paddingBottom:'6px',
            paddingLeft:'4px',
            transition: 'padding 0.3s ease'            
    }); 
}).mouseout(function() {
    $(this).css({
        paddingTop:'3px',
        paddingRight:'2px',
        paddingBottom:'3px',
        paddingLeft:'2px',
        transition: 'padding 0.3s ease'
    });

});
});
于 2013-06-12T05:19:32.990 回答