0

我正在尝试重新创建此处看到的效果：http: //jsfiddle.net/surendraVsingh/aATHd/2/

但我正在尝试为高度设置动画。出于某种原因，当我向下滚动时它工作正常，但在向上滚动时，高度不会变回正常。有任何想法吗？

这是我现在拥有的：http: //justinledelson.com/new/

$(window).scroll(function(){
    if ($(this).scrollTop() > 250){
     $('#header').animate({"height":"100px"}, 1500);
  } 
  else{
    $('#header').animate({"height":"470px"}, 1);
  }
});

谢谢！

4

1 回答 1

0

虽然我说这不是你的问题的解决方案，但似乎它实际上是一个解决方案。

在每个动作之后添加一个类。类似expanded和collapsed针对每种情况，并在制作动画之前检查该类是否存在。这样动画在必要时才会触发。

这避免了多次触发动画排队动画。这就是为什么如果您向下滚动很多次并滚动回顶部，“展开”动画会在您向上滚动很久之后触发（它必须等待每个“折叠”动画结束）

我的测试是：

$(window).scroll(function(){ 
    var $header = $('#header');
    if ($(this).scrollTop() > 50){  // x should be from where you want this to happen from top//
     if (!$header.hasClass('collapsed')) {
       $header.animate({"height":"100px"}, 1500, function() {
         $header.toggleClass('expanded collapsed');
       });
     }
    } 
    else{
      if (!$header.hasClass('expanded')) {
        $header.animate({"height":"470px"}, 1, function() {
         $header.toggleClass('expanded collapsed');
       });
      }
    }

});

标题应该以expanded类开头

于 2013-06-08T01:47:46.050 回答