JQuery制作了过多的动画队列
JQuery makes excessive animation queues
所以今天我想做一个简单的动画,当我把鼠标悬停在按钮上时,按钮会变大,当我把鼠标从按钮上移开时,按钮会缩小。我尝试使用这个简单的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。我指的是导航栏中的按钮。(如果你好奇,这是给我妹妹的。)
您需要在开始下一个动画之前将当前动画.stop()
,否则它将像您当前观察的那样排队
试试这个小提琴
您需要使用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");
});
});
$(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'
});
});
});
相关文章:
- 更改 jQuery 队列中动画的缓动函数
- jquery动画队列,队列只针对特定项目关闭
- Jquery幻灯片显示动画行为怪异(事件触发,队列中堆积)
- 设置 jQuery 动画的队列长度
- jQuery向动画队列添加函数
- 在队列中制作 jQuery 动画
- .动画具有多个动画的队列
- 使用按键推进 jQuery 动画队列
- JQuery,再次启动函数?动画队列
- 转盘的动画队列错误
- 在jquery中使用自定义动画队列
- JQuery制作了过多的动画队列
- jQuery创建一个函数循环,每个函数都有一个动画队列
- jQuery悬停动画队列
- 如何停止多个不透明度动画队列?(jQuery)
- jQuery动画队列False不工作
- jQuery动画队列为许多元素
- 创建带有参数的动画队列
- 如何获得带有虚假动画队列的onClick函数来运行外部函数
- jQuery:当鼠标静止时不要重复动画/不要安全动画队列/停止动画