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);
