0

这是一个例子。当您向下滚动时，导航栏会变成动画。当您滚动回顶部时，它应该动画回来。不幸的是，这发生得非常缓慢。这可能与每次滚动都必须检查和计算坐标这一事实有关。

换句话说，我正在寻找一种方法来使这个片段更有效：

$(window).scroll(function(){
    var supra = $("div#supra-top-wrap"),
        topWrap = supra.children("div#top-wrap"),
        subNav = supra.children("nav#sub-nav");

    if ($(window).scrollTop() > 0){
        topWrap.animate({"top":"-38px"}, 400);
        subNav.animate({"top":"-70px"}, 400);
    }
    else {
        topWrap.animate({"top":"0"}, 400, function() {
            subNav.animate({"top":"0"}, 400);
        });
    }
});

哦，这里有一个Fiddle可以让你随心所欲。

4

2 回答 2

3

我认为这是一个简单的动画排队案例，所以它们只有在之前的动画完成后才会执行，所以大约在 400 毫秒之后。尝试添加 stop()，如下所示：

topWrap.stop().animate(...)
subNav.stop().animate(...)

这应该会停止任何正在运行的动画并立即开始新的动画。

于 2012-11-12T09:27:52.930 回答
0

我尝试了其他方法 - 这有助于动画更快地做出反应，但仍然不如 .stop() @EvidentAgenda 提到的那么有效。我已经比较了动画字符串并检查它是否相同/如果不是那么我们触发动画

var tt = {'top': 0}; // Animation string
$(window).scroll(function(){
  var scroll = $(window).scrollTop();
  if(scroll > h) { var tt2 = {'top': 0}; }
  else { var tt2 = {'top': FHh*-1}; }
  //FHh is global var that is Div's height
  if(tt2 != tt) {
    $('#fixedHeader').stop().animate(tt2, 150);
    // can use together with .stop() - which even more faster
    tt = tt2;
  }
});
于 2015-01-24T11:31:09.743 回答