JQuery expands and scrolls at the same time

Question

I was wondering if the following is possible. I currently have code that opens a DIV at the bottom of the page using jquery. It is so simple:

$("#country_slide").slideToggle(); 

Then I have an example code that scrolls to the bottom of the page (just an example):

 $('html, body').animate({scrollTop:$(document).height()}, 'slow'); 

The problem is that this div that opens will be at the bottom of the page when it expands, so I want it to not only open, but also scroll down the page to show the div now opening when it opens.

I can only figure out how to fully expand the div, and then scroll to the available area. I want both processes to start simultaneously, and not one after another.

This is possible with jquery, and if so, can someone explain how to do this.

Answer 1

Check out this script: JsFiddle

I fire events, display (show, fadeIn, slideDown, etc.) and scroll through the element when $ (document) is ready.

I set the timers in milliseconds for the display function in 3 seconds and the scrolling in up to 4 seconds. You can adjust these times as needed to display the hidden element as you wish.

CSS

  #container{height:850px;background-color:red;width:300px;text-align:center; } #bottomDiv{display:none;position:relative;top:400px;width:260px;height:200px; background-color:dodgerblue;margin:20px auto;border: 1px solid #000000;text-align:center;} 

HTML

  <div id="container" style="height:1500px;background-color:red;width:300px;"> <p>I'm opening a div and scrolling below</p> <div id="bottomDiv" class="tempCss">Bottom Div</div> </div> 

SCRIPT

  $(document).ready(function(){ $("#bottomDiv").slideDown(3000); $('html, body').animate({ scrollTop: $("#bottomDiv").offset().top }, 4000,function(){ }); });