Javascript JQuery产生过多的动画队列
所以今天我想制作一个简单的动画,当我将鼠标悬停在按钮上时,按钮会变大,当我将鼠标从按钮上取下时,按钮会变小。我尝试使用这个简单的JQuery代码,但问题是,如果我将动画速度设置为慢速,多次打开和关闭按钮将创建多个动画队列,这将在鼠标离开按钮很久之后运行 如果鼠标离开按钮,有没有办法在缩小队列后杀死队列?显然,我想在按钮收缩后终止队列,以使动画生效 相关HTML:Javascript JQuery产生过多的动画队列,javascript,jquery,html,Javascript,Jquery,Html,所以今天我想制作一个简单的动画,当我将鼠标悬停在按钮上时,按钮会变大,当我将鼠标从按钮上取下时,按钮会变小。我尝试使用这个简单的JQuery代码,但问题是,如果我将动画速度设置为慢速,多次打开和关闭按钮将创建多个动画队列,这将在鼠标离开按钮很久之后运行 如果鼠标离开按钮,有没有办法在缩小队列后杀死队列?显然,我想在按钮收缩后终止队列,以使动画生效 相关HTML: <div id="global-nav"> <ul id="top-nav"> <
<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>
JSFiddle:
请原谅其他CSS、cat文本和HTML。我指的是导航栏上的按钮。(如果你好奇,这是给我妹妹的。)在开始下一个动画之前,你需要停止当前动画(),否则它会像你当前观察的那样排队。
您需要使用该函数,但如果您看到必须记住向该函数输入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");
});
});
我将在接下来的20分钟内不能洗澡,对不起。jQuery做了很多多余的事情,谢谢!你帮我解决了一个困扰我好几天的问题。。。我甚至尝试使用条件循环;一直以来,这里都有一个完美的解决方案。:)您可以使用“stop()”和作为我的答案。
$(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'
});
});
});