jQuery is great for adding simple animations because of its structure. Just
pull out one or more elements and then use any of the animation objects to animate.
The standard jQuery animations include the following:
??? fadeIn(), fadeOut(), and fadeTo(): These animations enable you to fade an object in
and out or fade from the current value to a predefined value.
??? slideDown(), slideUp(), and slideToggle(): These animations have the same effects
as the FAQ example you did earlier, expanding and collapsing a section of the page.
slideToggle() toggles an element between slideDown() and slideUp().
??? show(), hide(), and toggle(): show() and hide() fade and resize the element; toggle()
switches between showing and hiding the item.
These effects are really easy to use and can be tweaked by specifying the speed of the animation
as 'slow', 'normal', 'fast', or the number of milliseconds for the animation. You can
add a second parameter, which is the callback function to be called upon completion of the
animation.
$('#elementID').fadeOut('fast', function(){
alert("I'm done the animation")
});
jQuery also offers up an animate() method that enables you to change multiple properties
at the same time. The properties to change are contained in an object literal and passed
as the first parameter. The second parameter is speed, the next is the easing effect, and the
last is the callback function.
Pages:
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216