22.05.2017.

Monday.

 

 

⟹jQuery hide() and show()

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

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

 

$(selector).hide(speed,callback);

$(selector).show(speed,callback); 

 

 

➡The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.

➡The optional callback parameter is a function to be executed after the hide() or show() method completes (you will learn more about callback functions in a later chapter).

⟹jQuery toggle()

 

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

 

 

$(selector).toggle(speed,callback); 

➡The optional speed parameter can take the following values: "slow", "fast", or milliseconds.

➡The optional callback parameter is a function to be executed after toggle() completes.

⟹jQuery Fading Methods

➡With jQuery you can fade an element in and out of visibility.
➡jQuery has the following fade methods:


 ⇒ fadeIn()
 ⇒fadeOut()
 ⇒fadeToggle()
 ⇒fadeTo()

⟹jQuery fadeIn() Method

➡The jQuery fadeIn() method is used to fade in a hidden element.

➡Syntax:

$(selector).fadeIn(speed,callback);

➡The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

➡The optional callback parameter is a function to be executed after the fading completes.

➡The following example demonstrates the fadeIn() method with different parameters:




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

⟹jQuery fadeOut() Method

➡The jQuery fadeOut() method is used to fade out a visible element.

➡Syntax:

$(selector).fadeOut(speed,callback);

➡The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

➡The optional callback parameter is a function to be executed after the fading completes.

➡The following example demonstrates the fadeOut() method with different parameters:




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

⟹jQuery Sliding Methods

➡With jQuery you can create a sliding effect on elements.
jQuery has the following slide methods:

 ⇒slideDown()
 ⇒slideUp()
 ⇒slideToggle()

⟹jQuery slideDown() Method

➡The jQuery slideDown() method is used to slide down an element.

➡Syntax:

$(selector).slideDown(speed,callback);

➡The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

➡The optional callback parameter is a function to be executed after the sliding completes.

➡The following example demonstrates the slideDown() method:



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

⟹jQuery slideUp() Method

➡The jQuery slideUp() method is used to slide up an element.

➡Syntax:

$(selector).slideUp(speed,callback);

➡The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

➡The optional callback parameter is a function to be executed after the sliding completes.

➡The following example demonstrates the slideUp() method:



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

⟹jQuery slideToggle() Method

➡The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.

➡If the elements have been slid down, slideToggle() will slide them up.
If the elements have been slid up, slideToggle() will slide them down.

$(selector).slideToggle(speed,callback);

➡The optional speed parameter can take the following values: "slow", "fast", milliseconds.

➡The optional callback parameter is a function to be executed after the sliding completes.

➡The following example demonstrates the slideToggle() method:



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

⟹jQuery Animations - The animate() Method

➡The jQuery animate() method is used to create custom animations.

➡Syntax:

$(selector).animate({params},speed,callback);

➡The required params parameter defines the CSS properties to be animated.

➡The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

➡The optional callback parameter is a function to be executed after the animation completes.

➡The following example demonstrates a simple use of the animate() method; it moves a <div> element to the right, until it has reached a left property of 250px:



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

⟹jQuery stop() Method

➡The jQuery stop() method is used to stop an animation or effect before it is finished.

➡The stop() method works for all jQuery effect functions, including sliding, fading and custom animations.

➡Syntax:

$(selector).stop(stopAll,goToEnd);

⟹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.

➡Typical syntax: 

 $(selector).hide(speed,callback);





..................................................................