Javascript 如何同时设置div的高度和动画宽度

我正在尝试复制此网站上的左导航：。 如您所见，当您向下滚动约200像素时，将显示左侧导航。我几乎有一个问题：我目前正在同时设置div的高度和宽度的动画。我想做的是将左nav 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');
  }

});

$（窗口）。滚动（函数（）{
var wintop=$（window.scrollTop（）；
var docheight=$（document）.height（）；
var winheight=$（window.height（）；
var=150；
var smallheight=0；
var-smallwidth=0；
var slidebottomHeight=$（“slidebottom”）.height（）；
如果（（wintop>296））{
$（“#slidebottom”）.stop（）.animate（{height:docheight+“px”，width:newwidthgrow+“px”}，'fast'）；
}
如果（（wintop<296））
{ 
$（“#slidebottom”）.stop（）.animate（{height:smallheight+“px”，width:smallwidth+“px”}，'fast'）；
}
});

如果我理解正确，您希望按顺序执行两个操作。如果是这种情况，您可以使用

.animate

的回调。此回调在动画完成时执行。因此，您可以：

• 设定高度
• 等待设置高度
• 发出回叫

在代码中，它变成类似于：

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

---

您可以阅读有关回调的更多信息，并使用

.animate
中的回调。animate（）

对不起，我不知道什么是“回调”。你能给我举个例子吗。非常感谢。如果您不想对高度更改设置动画，请不要将其放入

动画

调用中。。。首先设置高度，然后调用

animate

以获取我尝试过的宽度。但无法让它工作。也许我做错了什么。我会调查的。谢谢。@RamonaSoderlind这是回电话，非常感谢！你很有帮助@RamonaSoderlind您会惊讶于阅读文档的实际帮助<代码>：D

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