如何解决如何停止jQuery排队动画效果
| 我有一个简单的jQuery悬停动画:jQuery(function($) {
$(\'.category\').hover(function(){
$(this).find(\'.banner\').fadeIn();
},function(){
$(this).find(\'.banner\').fadeOut(400);
});
});
所有这些操作是当有人将鼠标悬停在.category
元素上时,横幅div会淡入和淡出。简单。
我的问题是,由于我有大约十个ѭ1元素,如果有人过快或过快地在它们之间移动并且jQuery多次将它们排入同一动画,并不断使它们出现,请消失,直到被捕捉为止。
有没有简单的方法可以阻止这种情况的发生?
我看到了另一个建议在其中添加add3的问题,但这不起作用。如果我多次移动鼠标,动画将完全停止工作或只消失一半。
提前致谢
解决方法
您可以将
fadeOut
和fadeIn
转换为使用.animate()
,并带有用于停止动画排队的选项。
$(\'.category\').hover(function() {
$(this).find(\'.banner\').show().animate({
opacity: \"show\"
},{
queue: false
});
},function() {
$(this).find(\'.banner\').animate({
opacity: \"hide\"
},{
queue: false,duration: 400
});
});
jsfiddle上的代码示例
,当我实现最佳答案时,我的垂直滚动动画只是来回抖动。
这很有用-W3 Schools Set Interval,语法:
setInterval(函数,毫秒,param1,param2,...)
我的参数形式为“ 8”,则将持续时间强制为零,并且仅查看了指导性参数。
这为我工作:
var $scrollDiv = \'#mytestdiv\';
var $scrollSpeed = 1000;
var $interval = 800;
function configureRepeats() {
window.setInterval(function () {
autoScroll($scrollDiv,$scrollSpeed);
},$interval,{ queue: false });
};
其中\'autoScroll \'是:
$($scrollDiv).animate({
scrollTop: $($scrollDiv).get(0).scrollHeight
},{ duration: $scrollSpeed });
//Scroll to top immediately
$($scrollDiv).animate({
scrollTop: 0
},0);
编码愉快!
另请参阅我对此文章的原始评论:如何同时运行两个jQuery动画?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。