CODEWITHSUNDEEP
jqueryjquery-animatejquery-slide-effects
Geordie Dave
Geordie Dave

Reputation: 65

Use JQuery to animate one div over another

I have reviewed lots of other posts so please mods this is NOT a duplicate because the other posts do not answer my query. I have the following HTML:

<div id="page"></div>
<div id="page1">
  <h1>Page One</h1>
  <a href="#" id="topage2">Page 2</a>
</div>
<div id="page2">
  <h1>Page Two</h1>
  <a href="#" id="topage1">Page 1</a>
</div>

How would I use JQuery to animate and either slide up 'page2' DIV to replace 'page1' div and vice versa? I've tried:

var page1 = $('#page1').offset();
var page2 = $('#page2').offset();
page2.top = page1.top;
page2.left = page1.left;

Just to test it to see if I can replace 'page1' with 'page2' but it doesn't work. Obviously that code is wrapped up in a function which the hyperlink to go to each page uses, i.e $('#topage1').click, etc...

Has anyone any ideas, like I say have already looked at some other questions and answers but none of them seem to work or do what I want. Thanks in advance for any help.

Upvotes: 1

Views: 681

Answers (1)

Peter Black
Peter Black

Reputation: 1172

Using JQuery you can simply:

$( "#page1" ).slideUp();
$( "#page2" ).slideDown();

http://api.jquery.com/slideup/

Upvotes: 0

Related Questions