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