1

我正在尝试在此网站上复制左侧导航：http ://www.kahuna-webstudio.fr/ 。正如您所看到的，当您向下滚动大约 200 像素时，会出现左侧导航。我几乎遇到了一个问题：我目前正在同时为 div 的高度和宽度设置动画。我想要做的是将左侧导航 div 的高度设置为文档高度，然后当您向下滚动 296 像素时，宽度将增长到 150 像素。希望这是有道理的。

所以我的问题是：如何将此 div 的高度设置为文档高度，然后第二步是为宽度设置动画。

  This is the line I am currently using:
  $("#slidebottom").stop().animate({height:docheight +"px", width:newwidthgrow + "px"},'fast');

  What I want to work, but is not working is:
  slidebottomHeight = docheight;
  $("#slidebottom").stop().animate({width:newwidthgrow + "px"},'slow');

这是我当前的代码：

  $(window).scroll(function(){
  var wintop = $(window).scrollTop();
  var docheight = $(document).height();
  var winheight = $(window).height();

  var newwidthgrow = 150;
  var smallheight = 0;
  var smallwidth = 0;
  var slidebottomHeight = $("slidebottom").height();


  if((wintop > 296)) {

    $("#slidebottom").stop().animate({height:docheight +"px", width:newwidthgrow + "px"},'fast');

  }

  if((wintop < 296))
  { 
   $("#slidebottom").stop().animate({height:smallheight +"px", width:smallwidth + "px"}, 'fast');
  }

});
4

2 回答 2

2

如果我理解正确，您想按顺序执行两个动作。如果是这种情况，您可以将回调用于.animate. 动画完成时执行此回调。因此，您可以：

  • 设置高度
  • 等待设置高度
  • 触发回调

代码中的内容如下：

$("#slidebottom").stop().animate({width:newwidthgrow + "px"},'slow', function(){
    $("#slidebottom").animate({
       width:newwidthgrow + "px"
    });
});

.animate 您可以在此处阅读有关回调的更多信息。

于 2013-08-14T21:15:00.037 回答
1 
$("#slidebottom").stop().animate({
    height:docheight +"px"
},'fast',function(){
    // This is a callback function. It will be called when the animation
    // has finished executing.

    $("#slidebottom").stop().animate({
        width:newwidthgrow + "px"
    });
});
于 2013-08-14T21:13:58.403 回答