This demo will be affected whenever the code is run on any of the samples following it. As well as
this, each of the code samples has a setTimeout
function that delays any effects so
they can be previewed.

Animation
As well as the fadeIn
and fadeOut
functions offer
animation of fading an element in or out, jQuery supports custom animations
with properties that are to be manipulated. For this course, the following
features of the animate
function will be used:
- The CSS to be manipulated
- The duration of the animation
- The callback function when the animation is complete
There are several more features (or parameters) that can be manipulated
to make the animate
function even more powerful.

In this example, the fadeOut
function will be rewritten using the
animate
function:
setTimeout(function(){ jQuery("#main_image_display").animate({"opacity" : 0}, 1000, function(){jQuery("#main_image_display").hide()}); }, 4000);
It is also very common to manipulate the positioning of an element within a page using
jQuery. For example, the top
property can be easily changed by jQuery:
setTimeout(function(){ jQuery("#main_image_display").animate({"top" : "-50px"}, 3000); }, 4000);