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?
Show/Hide Div w/ Animation
Moderator: General Moderators
- EverLearning
- Forum Contributor
- Posts: 282
- Joined: Sat Feb 23, 2008 3:49 am
- Location: Niš, Serbia
Re: Show/Hide Div w/ Animation
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
Alright, so I opted for jQuery. Here's what I put together (in action= http://www.brookechase.com/jquery.php):
JS:
CSS:
HTML:
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.
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');
});
});
Code: Select all
#container {
height: 100px;
}
#firstDiv {
background-color: #003366;
width: 400px;
height: 100px;
}
#secondDiv {
background-color: #0099CC;
width: 400px;
height: 100px;
}
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>
Thanks in advance.
- EverLearning
- Forum Contributor
- Posts: 282
- Joined: Sat Feb 23, 2008 3:49 am
- Location: Niš, Serbia
Re: Show/Hide Div w/ Animation
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
Perfect. Thanks!
Re: Show/Hide Div w/ Animation
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
Feel free to drop us a line if you have any questions.
Gil Shabat
Novologies LLC
http://www.novologies.com