1

  1. 我一直在尝试使用 jQuery animate 在单击打开/关闭链接时从屏幕左侧滑动侧边栏 div 'in/out'。这工作正常。

  2. 接下来，当用户滚动到侧边栏 div 的底部时，我想为侧边栏 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);

    } 

});

});
4

1 回答 1

0

问题是由于每次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);
}
于 2013-04-19T15:29:53.413 回答