jQuery Effects

Here is the list of jQuery effects.

  1. hide, show, toggle
  2. slideUp, slideDown, slideToggle
  3. fadeIn, fadeOut, fadeToggle

Each of above methods take 2 optional parameters. First parameter is used to specify the speed of effect. Second parameter is used to specify the callback function.

Here is an example of fadeOut effect.

$(‘#transactionNumber’).fadeOut(2000, function(){
console.log(“This code gets called after fadeOut is completed. It is a call back function”);
});

Stopping the effect
You can use stop method to stop the effect in the middle.
$(“#transactionNumber”).stop();

Chaining multiple effects

You can chain multiple effects as shown below. In below example, element with id “transactionNumber” slides up and then again starts sliding down.

$(‘#transactionNumber’).slideUp(3000).slideDown(3000)

Creating effect using animate method
We can also create a custom effect using animate() method. Here is the syntax of animate method.

animate({List of CSS properties and values },speed,callback);

Here is an example on animate method. Below line of code will move the element with id “transactionNumber” to the position 333px from right and 222px from top. Note that element should have position property as “absolute” or “relative” for this to work.

$(‘#transactionNumber’).animate({right: ‘333px’, top:’222px’},4000);

You may also like...