Learning jQuery: Fading Menu - Replacing Content
The more I learn about jQuery, the more natural it feels. Probably because of how closely tied to CSS it is. From a design perspective, the syntax for jQuery is:
“When I do this, make the CSS do this.”
So now instead of thinking about CSS as page layout and a way to style your page when it loads, you can use in animation and change it on-the-fly to react to events that happen on your page. Take for example a menu. You can take the “click” event that happens when clicking on a menu to do lots of stuff.
This example page has three menu items and three content areas: home, about, and contact. By default, the home button is selected, meaning that it’s menu graphic is at full opacity and it’s content area is shown:
#home {
display: block;
padding: 30px;
}
#home-button {
opacity: 1.0;
border-bottom: 1px solid black;
}By default, the other menu items are faded and their content areas are hidden, like so:
#about {
display: none;
padding: 30px;
}
#about-button {
opacity: 0.5;
border-bottom: 1px solid black;
}With jQuery, we can listen for that click event and then act accordingly. This is what we want to happen:
- Fade IN the menu item being clicked on.
- Fade OUT all other menu items.
- DISPLAY the corresponding content area.
- HIDE all other content areas.
Since the home button is active by default, let’s look at the jQuery javascript for the about button:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#about-button").click(function(){
$(this).animate({
opacity: 1.0,
borderWidth: 5
}, 600 );
$("#home")
.css({
display: "none"
});
$("#about")
.css({
display: "block"
});
$("#contact")
.css({
display: "none"
});
$("#home-button").animate({
opacity: 0.5,
borderWidth: 1
}, 600 );
$("#contact-button").animate({
opacity: 0.5,
borderWidth: 1
}, 600 );
});
});
</script>Your complete javascript code would have similar chunks for all three buttons. As I’ve mentioned before, I’m just learning here, so there is likely to be a way smarter way of writing this, but these are the basics and they work.
Loading ...
1
Nice Chris. In FF 2 the cursor is default on hover though. Maybe a quick cursor:pointer can be thrown into the CSS.
Comment by Adrian — April 9, 2008 @ 6:21 am
2
i like jQuery
cheers mate
Comment by b0li — April 9, 2008 @ 6:29 am
3
This is truly nice, Chris.
Now I’ve got to come up with a new project to experiment with jQuery.
And it’s your fault.
…and I thank you - in uppercase - for this
Comment by Flavia — April 9, 2008 @ 6:32 am
4
Hello Chris,
Maybe a better way to perform your animation :
$(document).ready(function(){
$(”#page-wrap div.button”).click(function(){
if($(this).css(”opacity”) != “1″)
{
$(this).actualBtn.animate({
opacity: 1,
borderWidth: 5
}, 600 );
}
$(this).siblings().animate({
opacity: 0.5,
borderWidth: 1
}, 600 );
});
});
You probably have to do some enhancements to filter the showed content div but it’s not a big deal for you I guess.
If you want, I’ll do it
Comment by Romz — April 9, 2008 @ 7:40 am
5
Sweet. I’m in the process of learning jQuery myself so glad you’re doing some here
Comment by David Sparks — April 9, 2008 @ 9:05 am
6
Nice work Chris. My only suggestion would be to speed up the duration. Awesome though!
Comment by David Walsh — April 9, 2008 @ 10:49 am
7
jQuery is by far my preferred javascript library of choice and here is another example of why. Well done.
Comment by Joe — April 9, 2008 @ 11:53 am
8
Hmm, the content slides up and down with the thickness of the underlining black bar, in Firefox at least.
Comment by Eoin — April 10, 2008 @ 1:57 am
9
Thanks for another good jQuery post.
Comment by David Madden — April 10, 2008 @ 4:43 am
10
Nice post Chris, I would also suggest maybe tying in the history plugin for jquery so that you can still use the next and back buttons.
Your skills are improving
Comment by Benjamin Sterling — April 10, 2008 @ 1:11 pm