To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

Part 4.2jQuery animation

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.

CSS rule structure

In this example, the fadeOut function will be rewritten using the animate function:

JavaScript
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:

JavaScript
setTimeout(function(){
  jQuery("#main_image_display").animate({"top" : "-50px"}, 3000);
}, 4000);
		
Code previewClose
Feedback 👍
Comments are sent via email to me.