Fading and Sliding with jQuery
Want to make content on your page disappear and reappear? How about making your pages "fade" out when the user clicks a link? Look no further!
Sliding content on/off the screen
How do you make content slide into place on the screen?
Here is an example of sliding this page's right-sidebar.
Here is how it's done. The right-sidebar has an id of "sidebar", the button has an id of "sidebar-slideToggle". The code below tells the browser that when you click "sidebar-slideToggle" to run the "slideToggle" function against the element with id "sidebar".
$("#sidebar-slideToggle").click(function () {
$(".sidebar").slideToggle("slow");
});
Fading content on/off the screen
How do you make content fade out or into place?
Here is how it's done. The right-sidebar has an id of "sidebar", the button has an id of "sidebar-fadeToggle". The code below tells the browser that when you click "sidebar-fadeToggle" to run the "fadeToggle" function against the element with id "sidebar".
$("#sidebar-fadeToggle").click(function () {
$(".sidebar").fadeToggle("slow");
});
Page Transition - fade the page away
How do you make the webpage fade away when teh user clicks a link?
Here is an example a link that makes the page "fade out" before taking you onto the next page.
Note: this link points back to this page.
Here is how it's done. The link aboce has an id of "href-fade". The code below tells the browser that when that link is clicked, that it should run the "fadeOut" function and then redirect the user.
$("#href-fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$(".main").fadeOut(500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
Note: To make the transition easier on the eyes, the function above only fades teh "main" content of this page. Had this been a link to someone else's websidte, rather than using ".main" in the code, I would have used "body" so that my entire page would have faded away. Click the link again and you'll see what I'm talking about.