Page 1 of 1

Show/Hide Div w/ Animation

Posted: Fri Aug 01, 2008 9:47 am
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?

Re: Show/Hide Div w/ Animation

Posted: Fri Aug 01, 2008 10:02 am
by EverLearning
The site in question uses The Yahoo! User Interface Library (YUI), but same effects can be achieved using JQuery, Scriptaculous, MooTools...

Re: Show/Hide Div w/ Animation

Posted: Fri Aug 01, 2008 2:06 pm
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.

Re: Show/Hide Div w/ Animation

Posted: Fri Aug 01, 2008 8:54 pm
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');
        });
    });
});

Re: Show/Hide Div w/ Animation

Posted: Sun Aug 03, 2008 8:06 am
by imderek
Perfect. Thanks!

Re: Show/Hide Div w/ Animation

Posted: Thu Jan 29, 2009 8:28 am
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