Question

我找到了这个脚本并且会很棒但是如果我滚动到顶部所有浏览器都会等待大约10秒来动画回来。如果向下或向上滚动，此脚本将生成动画。向下的方式很好，下注方式不是。我不知道会出现什么问题。我试图只留下一个动画但结果相同。

由于

$(function () {

  var iScrollPos = 0;
  var header = $('header');
  var li = $('.headerRight nav ul li');
  var logo = $('h2');

  $(window).scroll(function () {
      var iCurScrollPos = $(this).scrollTop();
      if (iCurScrollPos > iScrollPos) {
        header.animate({
          top: '-3.5em'
        }, 250);

        li.animate({
          padding: '0'
        }, 250);

        logo.animate({
          fontSize: '1.5em'
        }, 250);
      }
      else {
        header.animate({
          top: '0em'
        }, 250);

        li.animate({
          padding: '1em'
        }, 250);

        logo.animate({
          fontSize: '2em'
        }, 250);
      }
  });
});

Answer 1

您可能会遇到动画队列填满动画请求所造成的影响。每个动画必须在下一个可以触发之前完成元素。你想要做的是当你需要关闭下一个动画时停止播放任何动画。

没有你的用户界面，我无法完全告诉你所看到的内容，但我想象这样的事情要解决。请注意立即停止所有的速记

all = header.add(li).add(logo);

并在条件中：

all.stop（true，false）; //停在哪里

另外，我在项目中添加了一个类，因此只有在尚未动画到位置时才动画。

    $(function () {

        var iScrollPos = 10;
        var header = $('header');
        var li = $('.headerRight nav ul li');
        var logo = $('h2');

        $(window).scroll(function () {
            var iCurScrollPos = $(this).scrollTop();
            var all = header.add(li).add(logo);
            if (iCurScrollPos > iScrollPos && !all.hasClass('up')) {
                all.stop(true, false);
                header.animate({
                    top: '-3.5em'
                }, 250);

                li.animate({
                    padding: '0'
                }, 250);

                logo.animate({
                    fontSize: '.5em'
                }, 250);
                all.addClass('up');
            }
            else if (iCurScrollPos <= iScrollPos && all.hasClass('up')) {
                all.stop(true, false);
                header.animate({
                    top: '0em'
                }, 250);

                li.animate({
                    padding: '1em'
                }, 250);

                logo.animate({
                    fontSize: '2em'
                }, 250);
                all.removeClass('up');
            }
        });
    });

至少要看到它的小提琴：http://jsfiddle.net/3d4pmvky/

Animate在滚动时无法正常工作

1 个答案: