Show/Hide Div w/ Animation

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
imderek
Forum Newbie
Posts: 12
Joined: Thu Jul 24, 2008 9:04 am

Show/Hide Div w/ Animation

Post by imderek »

See example at top right of page: http://www.scopings.com/

Clicking on any of the three options swaps that div with a new one. (Note: the "swap" does not affect or move the rest of the content.) So how is this done exactly?
User avatar
EverLearning
Forum Contributor
Posts: 282
Joined: Sat Feb 23, 2008 3:49 am
Location: Niš, Serbia

Re: Show/Hide Div w/ Animation

Post by EverLearning »

The site in question uses The Yahoo! User Interface Library (YUI), but same effects can be achieved using JQuery, Scriptaculous, MooTools...
imderek
Forum Newbie
Posts: 12
Joined: Thu Jul 24, 2008 9:04 am

Re: Show/Hide Div w/ Animation

Post by imderek »

Alright, so I opted for jQuery. Here's what I put together (in action= http://www.brookechase.com/jquery.php):

JS:

Code: Select all

 
$(document).ready(function(){
    $("#secondDiv").hide();
    $("a:contains('Swap me')").click(function() {
        $("#secondDiv").slideDown('slow');
        $("#firstDiv").slideUp('fast');
    });
    $("a:contains('Nevermind')").click(function() {
        $("#firstDiv").slideDown('slow');
        $("#secondDiv").slideUp('fast');
    });
});
 
CSS:

Code: Select all

 
#container {
    height: 100px;
}
#firstDiv {
    background-color: #003366;
    width: 400px;
    height: 100px;
}
#secondDiv {
    background-color: #0099CC;
    width: 400px;
    height: 100px;
}
 
HTML:

Code: Select all

 
<body>
<div id="container">
    <div id="firstDiv">
        <a href="#">Swap me</a>
    </div>
    <div id="secondDiv">
        <a href="#">Nevermind</a>
    </div>
</div>
<br /><br />
Page content
</body>
 
Basically, when you click "Swap me" it slides the firstDiv up and slides the secondDiv down. The only question I have is, how can I set a slight delay in between the two actions? So that it waits for the firstDiv to slide up before the secondDiv slides down?

Thanks in advance.
User avatar
EverLearning
Forum Contributor
Posts: 282
Joined: Sat Feb 23, 2008 3:49 am
Location: Niš, Serbia

Re: Show/Hide Div w/ Animation

Post by EverLearning »

Set the slideDown of the secondDiv as a callback to the slideUp of the firstDiv, so it will be executed when the first effect(slideDown()) is finished, and vice versa for the second link.

Code: Select all

$(document).ready(function(){
    $("#secondDiv").hide();
    $("a:contains('Swap me')").click(function() {
        $("#firstDiv").slideUp('fast', function() {
            $("#secondDiv").slideDown('slow');
        }); 
    });
    
    $("a:contains('Nevermind')").click(function() {
        $("#secondDiv").slideUp('fast', function() {
            $("#firstDiv").slideDown('slow');
        });
    });
});
imderek
Forum Newbie
Posts: 12
Joined: Thu Jul 24, 2008 9:04 am

Re: Show/Hide Div w/ Animation

Post by imderek »

Perfect. Thanks!
gshabat
Forum Newbie
Posts: 1
Joined: Thu Jan 29, 2009 8:20 am

Re: Show/Hide Div w/ Animation

Post by gshabat »

We just wrote a short article on the way we implemented the slide-in login for http://www.scopings.com - you can find it under the following address: http://www.novologies.com/post/2009/01/ ... Login.aspx

Feel free to drop us a line if you have any questions.

Gil Shabat
Novologies LLC
http://www.novologies.com
Post Reply