jQuery Load() Method

jQuery Effects

by

jquery-javascriptThis tutorial is about the jQuery effects. There are several techniques that jQuery library provides, just like for adding animation to a web page. It contains simple, standard animations that are mostly used and has an ability to create awesome custom effects.

 

Below are the following commonly used effects:

 

  • hide()

Example: All h2 elements disappears when the user clicks on any of the h2 elements.

$(document).ready(function(){
 $("h2").click(function(){
   $(this).hide();
 });
});

 

  • show()

Example: All hidden div elements reappears when the user clicks any of the h2 elements.

$(document).ready(function(){
 $("h2").click(function(){
   $("div").show();
 });
});

 

  • toggle()

Example: All hidden div elements reappears or disappears if it is visible when the user clicks on any of the h2 elements.

$(document).ready(function(){
 $("h2").click(function(){
   $("div").toggle();
 });
});

 

jQuery Fading Methods

  • fadeIn()

Syntax:

$(selector).fadeIn(speed,callback)

You can set the speed from slow to fast or vice versa and time will be in milliseconds(1000ms = 1s).

Example: All div elements fades slowly when the user clicks on any of the h2 elements.

$(document).ready(function(){
 $("h2").click(function(){
   $("div").fadeIn(1000,0);
 });
})
$(document).ready(function(){
 $("h2").click(function(){
   $("div").fadeIn("slow");
 });
})

  • fadeOut()

  • fadeToggle()

fadeOut() method, fades out a html element while the fadeToggle() method, toggles the visiblity of a html element.

Example: All div elements fades out in just 3 seconds whenever the user clicks on any of the h2 element.

$(document).ready(function(){
 $("h2").click(function(){
   $("div").fadeOut(3000);
 });
});

 

Example: All the div elements fades out if its visible or it will fade in if it is hidden, whenever the user clicks on any of the h2 elements.

$(document).ready(function(){
 $("h2").click(function(){
   $("div").fadeToggle("fast");
 });
});

  • fadeTo()

This method has the ability that allows fading to a gevin opacity (value between 0 and 1).

Syntax:

$(selector).fadeTo(speed,opacity,callback);

Example: All the div elements fades to the provided opacity when the user clicks on any of the h2 elements.

$(document).ready(function(){
 $("h2").click(function(){
   $("div").fadeTo("slow",0.5);
 });
});

 

  • slideDown()

This method has the ability to slide down an HTML elements.

Example: All the div elements slide down slowly when the user clicks on any of the h2 elements.

$(document).ready(function(){
 $("h2").click(function(){
   $("div").slideDown("slow");
 });
});

  • slideUp()

  • slideToggle()

slideUp() method, slides up an html element while the slideToggle() method, slides down when the HTML element slides up. But when the HTML element slides down, the slideToggle() will slide up respectively.

Example: All div elements slide up in just 3 seconds whenever the user clicks on any of the h2 element.

$(document).ready(function(){
 $("h2").click(function(){
   $("div").slideUp(3000);
 });
});

Example: All the div elements slide up if it slides down or its slides down if it  slides up whenever the user clicks on any of the h2 elements.

$(document).ready(function(){
 $("h2").click(function(){
   $("div").slideToggle("fast");
 });
});

 

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :

 
Email – [email protected]
Mobile No. – 09305235027 – tnt

Leave a Comment