Different types of Jquery Effect methods :

1. animate( params, [duration, easing, callback] )
   • The animate( ) method performs a custom animation of a set of CSS properties.
   • params: A map of CSS properties that the animation will move toward.
   • duration: This is optional parameter representing how long the animation will run.
   • easing: This is optional parameter representing which easing function to use for the transition
   • callback: This is optional parameter representing a function to call once the animation is complete.
   • Example:- $("#block").animate({
     width: "70%",
     opacity: 0.4,
     marginLeft: "0.6in",
     fontSize: "3em",
     borderWidth: "10px"
     }, 1500 );
2. fadeIn( speed, [callback] )
   • This method fades in all matched elements by adjusting their opacity and firing an optional callback after completion.
   • speed: Represents one of the three predefined speeds ("slow", "def", or "fast") or the number of milliseconds (e.g. 1000).
   • callback: Optional parameter represents a function to call after the animation is complete.
   • Example:-$(".target").fadeIn( 'slow', function(){
     $(".log").text('Fade In Transition Complete');
     });
3. fadeOut( speed, [callback] )
   • Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion.
   • Example:- $(".target").fadeIn( 'slow', function(){
     $(".log").text('Fade In Transition Complete');
     });
4. fadeTo( speed, opacity, callback )
   • Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
   • Example:- $(".target").fadeTo( 'slow', 0.7, function(){
     $(".log").text('More Opacity Transition Complete');
     });
5. hide()
   • Hides each of the set of matched elements if they are shown.
   • Example:- $("#hide").click(function () {
     $(".mydiv").hide();
     });
     event.stopPropagation(); });
6. hide( speed, [callback] )
   • Hide all matched elements using a graceful animation and firing an optional callback after completion.
   • Example:-$("#hide").click(function () {
     $(".mydiv").hide(10);
     });
7. show( )/ show( speed, [callback] )
   • Displays each of the set of matched elements if they are hidden., we can set time for animation and we can call a callback function also
   • Example:-$("#hide").click(function () {
     $(".mydiv").show();
     //$(".mydiv").show(10);
     });
8. slideDown( speed, [callback] ) / slideUp( speed, [callback] ) / slideToggle( speed, [callback] )
   • Reveal and hide all matched elements by adjusting their height and firing an optional callback after completion.
   • Example:- $(".target").slideToggle( 'slow', function(){
     $(".log").text('Toggle Transition Complete');
     });
9. stop( [clearQueue, gotoEnd ])
   • Stops all the currently running animations on all the specified elements.
   • Example:-$("#stop").click(function(){
     $(".target").stop();
     });
10. jQuery.fx.off
    • This is used to disable or enable all the animations Globally
    • Example:- $("#enable").click(function(){
      jQuery.fx.off = false;
      });

Examples on Jquery Effects

Click enable or disable and then go or back button: (jQuery.fx)
Enable Disable GO BACK

$(document).ready(function() { $("#enable").click(function(){
 jQuery.fx.off = false; });
 $("#disable").click(function(){
 jQuery.fx.off = true; });
$("#go").click(function(){
$(".target").animate({left: '+=200px'}, 2000); });
 $("#back").click(function(){
 $(".target").animate({left: '-=200px'}, 200); });
 });