我正在尝试复制此网站的左侧导航: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');
}
});
最佳答案
如果我没理解错的话,你想按顺序执行两个 Action 。如果是这种情况,您可以使用 .animate
的回调。当动画完成时执行此回调。因此您可以:
- 设置高度
- 等待设置高度
- 触发回调
代码变成这样:
$("#slidebottom").stop().animate({width:newwidthgrow + "px"},'slow', function(){
$("#slidebottom").animate({
width:newwidthgrow + "px"
});
});
您可以阅读有关回调和.animate
的更多信息here .
关于javascript - 如何同时设置div的高度和动画宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18242344/