jQuery Advanced - Part 1

To hide a paragraph element,

$(document). ready(function(){
$("p").load(function(){
$(this).hide();
});
});

To fade HTML element,

• $("#div1").fadeIn();
  :- This fades in an HTML element specified in the jQuery selector
• $("#div2").fadeIn('slow');
  :- This fades in an HTML element specified in the jQuery selector slowly
• $("#div3").fadeIn(3000);
  :-This fades in an HTML element specified in the jQuery selector in 3000 milliseconds,i.e., 3 seconds

Similarly, To fade out an HTML element on unload of a web page or part of a web page,

• $("#div1").fadeOut();
  :- This fades out an HTML element specified in the jQuery selector
• $("#div2").fadeOut('slow');
  :- This fades out an HTML element specified in the jQuery selector slowly
• $("#div3").fadeOut(3000);
  :-This fades out an HTML element specified in the jQuery selector in 3000 milliseconds,i.e., 3 seconds

To change the visibility of an element on an event trigger, use

$("#button1").onclick = function() {
$("#div1").toggle();
}

The functionality achieved by the above code jQuery snippet, is when you click an the button named "button1" as an id , the element will be hidden. When we click on "button1" for the second time, the element will be displayed and so on.