jQuery Animate - 边栏输入/输出 - 奇怪的行为

Question

1. 我一直在尝试使用jQuery动画在点击打开/关闭链接时从屏幕左侧滑动侧边栏div'进/出'。这很好。

2. 接下来，当用户滚动到侧边栏底部时，我想要为侧边栏div设置动画，这也可以正常工作。

3. 当我在最后一个动画淡化侧边栏后再尝试再次单击打开的链接时，会出现问题。 （在pt.2运行之后）

当我点击打开的链接时，我得到大约3-4秒的延迟，我无法弄清楚我做错了什么，真的很感激一些指针，因为现在已经变得相当困难我的方法。

感谢。

演示： http://jsfiddle.net/fRFCN/5/

1）点击“打开” 2）向下滚动 3）边栏淡出 4）再次单击“打开” 5）等待5-8秒，然后出现侧栏。 第4步是延迟错误。

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);

    } 

});

});

Answer 1

问题是由于{每次窗口滚动时scroll代码触发向上或向下滚动，因此排队很多动画事件隐藏侧边栏，即使在滚动回到顶部之后仍然正在运行并且隐藏侧边栏。所以下一个 open 将是一个长队列中的最后一个，因此再次打开可变时间延迟。

$('#pullout').animate({
    'opacity': '0',
    right: '+=0'
},600);

解决此问题的一种方法是添加一个条件来停止多次添加动画，例如：

var element = $('#pullout');

if (scroll > offset && $('#pullout').css('opacity') == 1) {
    $('#pullout').animate({
    'opacity': '0',
        right: '+=0'
    },600);
}