jQuery Effects Show/Hide

With jQuery, you can hide and show HTML elements with the hide() and show() methods:

jQuery has the following fade methods::

Effects

1. show() - method is used to fade in a hidden element
2. hide() - method is used to fade out a visible element

Example

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
}); 
$("button").click(function(){
  $("p").hide(1000);
}); 

$("button").click(function(){
  $("p").toggle();
}); 

jQuery Effects Fade

With jQuery you can fade an element in and out of visibility

jQuery has the following fade methods::

Effects

1. fadeIn() - method is used to fade in a hidden element
2. fadeOut() - method is used to fade out a visible element
3. fadeToggle()- method toggles between the fadeIn() and fadeOut() methods.
4. fadeTo() - method allows fading to a given opacity (value between 0 and 1)

Example

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
}); 

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
}); 

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

$("button").click(function(){
  $("#div1").fadeTo("slow", 0.15);
  $("#div2").fadeTo("slow", 0.4);
  $("#div3").fadeTo("slow", 0.7);
});

jQuery Effects - Animation

With jQuery, you can create custom animations

jQuery has the following fade methods::

Animation

1. animate() -method is used to create custom animations

Example

$("button").click(function(){
  $("div").animate({left: '250px'});
}); 

$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
});  

$("button").click(function(){
  $("div").animate({
    height: 'toggle'
  });
}); 

jQuery Stop Animations

The jQuery stop() method is used to stop animations or effects before it is finished.

jQuery has the following slide methods:

Stop

1. stop() -method is used to stop an animation or effect before it is finished.

Example

$("#stop").click(function(){
  $("#panel").stop();
}); 

jQuery Sliding Methods

With jQuery you can create a sliding effect on elements.

jQuery has the following slide methods:

Sliding

1. slideDown() -method is used to slide down an element
2. slideUp() -method is used to slide up an element.
3. slideToggle() - method toggles between the slideDown() and slideUp() methods.

Example

$("#flip").click(function(){
  $("#panel").slideDown();
}); 

$("#flip").click(function(){
  $("#panel").slideUp();
}); 

$("#flip").click(function(){
  $("#panel").slideToggle();
}); 

jQuery Callback Functions

JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors. To prevent this, you can create a callback function..

A callback function is executed after the current effect is finished.

Example

$("button").click(function(){
  $("p").hide("slow", function(){
    alert("The paragraph is now hidden");
  });
}); 

$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
}); 

jQuery - Chaining

With jQuery, you can chain together actions/methods.

A callback function is executed after the current effect is finished.

Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.

$("#p1").css("color", "red").slideUp(2000).slideDown(2000); 

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);