jQuery动画-边栏中/外-奇数行为
jQuery动画-边栏中/外-奇数行为
提问于 2013-04-19 13:36:49
- 当单击打开/关闭链接时，我一直在尝试使用jQuery动画从屏幕左侧滑动侧栏div 'in/out‘。这个很好用。
- 接下来，当用户滚动到侧栏div的底部时，我想将侧栏div动画化，这也很好。
- 当我尝试在最后一个动画淡出边栏后再次单击打开链接时，就会出现问题。(在pt.2运行之后)
当我点击打开的链接，我得到一个大约3-4秒的延迟，我不知道我做错了什么，真的很感激一些指点，因为我现在的方法已经被困住了。
谢谢。
演示： http://jsfiddle.net/fRFCN/5/
1)单击“打开”，2)向下滚动，4)再次单击“打开”，5)等待5-8秒，然后侧边栏出现。第四步是延迟错误。
jQuery(document).ready(function() {
jQuery(".open a").on("click", function() {
jQuery('.sidebar').animate({
'opacity': '1',
right: '+=0'
},300);
return false;
});
jQuery('.close').on('click', function() {
jQuery('.sidebar').animate({
'opacity': '0',
right: '+=0'
},300);
return false;
});
var element = jQuery('.sidebar');
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop() + jQuery(window).height();
var offset = element.offset().top + element.height();
if (scroll > offset) {
jQuery('.sidebar').animate({
'opacity': '0',
right: '+=0'
},600);
}
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2013-04-19 15:29:53
这个问题是由于每次窗口向上或向下滚动时都会触发scroll代码，因此它正在排队等待大量的动画事件，以隐藏侧边栏，而侧边栏甚至在滚动回顶部后仍在运行和隐藏。因此，下一个打开将是一个长队列中的最后一个，因此再次打开的时间延迟是可变的。
$('#pullout').animate({
'opacity': '0',
right: '+=0'
},600);解决这一问题的一种方法是添加一个条件，以停止多次添加动画，例如：
var element = $('#pullout');
if (scroll > offset && $('#pullout').css('opacity') == 1) {
$('#pullout').animate({
'opacity': '0',
right: '+=0'
},600);
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16105959
复制相关文章
相似问题
腾讯云开发者
