Continuing on with our “jQuery effects” mini-series, today we’ll be talking about “sliding away” objects. “Sliding” is actually simply animating the height of the object being reduced to 0.
We’ll be taking a look at three functions: slideUp(), slideDown and slideToggle(). slideUp() will cause the object to slide (upwards) out of sight. While slideDown() will cause the object to slide (downwards) into sight. Lastly, slideToggle() will toggle between the two.
The syntax of all three of these functions is identical. Here’s a look at the syntax of one of these functions:
[javascript]slideToggle( speed, [callback] );[/javascript]
speed is the speed of the animation. Possible values are slow, normal, fast or the number of milliseconds you want the animation to run for. [callback] is a callback function to be executed upon the completion of the animations.
Let’s take a look at a quick example:
[javascript]$("a").click(function() {
$("p").slideToggle( "1500" );
});[/javascript]
Nieruchomosci Gryfino
August 4, 2009 11:39 pm
Simple and handful tool. Sometimes the most simple solutions can give best results. And some basic effects used on text or graphic could improve general site reception. I think that these basic concepts should be more popular. Sometimes I sites so fulfilled with effects (especially in flash sites) that I can’t see the content and the whole site is slow as a snail. I would recommend using simple effects and simple methods because even if this is less striking it is also more effective.