CODEWITHSUNDEEP
javascriptjqueryanimationjquery-animate
Ramona Soderlind
Ramona Soderlind

Reputation: 213

How to set height of div and animate width at same time

I am trying to replicate the left nav at this website: http://www.kahuna-webstudio.fr/. As you can see when you scroll down about 200 pixels the left nav appears. I almost have it with one problem: I am currently animating the height and width of my div at the same time. What I want to do is set the height of the left nav div to the document height, and then when you scroll down exactly 296 pixels the width will grow to 150 pixels. Hope that makes sense.

So my question is: how can I set the height of this div to the document height, and then a second step would be to animate the width.

  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');

Here is my current code:

  $(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');
  }

});

Upvotes: 1

Views: 563

Answers (2)

danielepolencic
danielepolencic

Reputation: 5173

If I understood correctly, you want to execute two action in sequence. If that is the case, you can use the callback for .animate. This callback is executed when the animation complete. Hence you can:

  • set the height
  • wait for the height to be set
  • fire the callback

Which in code becomes something like:

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

You can read more about the callback and .animate here.

Upvotes: 2

php_nub_qq
php_nub_qq

Reputation: 16045

$("#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"
    });
});

Upvotes: 1

Related Questions