jQuery Effects

Examples

jQuery hide()
Demonstrates a simple jQuery hide() method.

jQuery hide()
Another hide() demonstration. How to hide parts of text.

jQuery slideToggle()
Demonstrates a simple slide panel effect.

jQuery fadeTo()
Demonstrates a simple jQuery fadeTo() method.

jQuery animate()
Demonstrates a simple jQuery animate() method.

---

jQuery Hide and Show

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

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

Both hide() and show() can take the two optional parameters: speed and callback.

Syntax:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

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

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

The callback parameter is the name of a function to be executed after the hide (or show) function completes. You will learn more about the callback parameter in the next chapter of this tutorial.

---

jQuery Toggle

The jQuery toggle() method toggles the visibility of HTML elements using the show() or hide() methods.

Shown elements are hidden and hidden elements are shown.

Syntax:

$(selector).toggle(speed,callback)

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

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

The callback parameter is the name of a function to be executed after the hide (or show) method completes.

---

jQuery Slide - slideDown, slideUp, slideToggle

The jQuery slide methods gradually change the height for selected elements.

jQuery has the following slide methods:

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

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

The callback parameter is the name of a function to be executed after the function completes.

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

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

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

---

jQuery Fade - fadeIn, fadeOut, fadeTo

The jQuery fade methods gradually change the opacity for selected elements.

jQuery has the following fade methods:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

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

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

The opacity parameter in the fadeTo() method allows fading to a given opacity.

The callback parameter is the name of a function to be executed after the function completes.

fadeTo() Example $("button").click(function(){   $("div").fadeTo("slow",0.25); });

fadeOut() Example $("button").click(function(){   $("div").fadeOut(4000); });

---

jQuery Custom Animations

The syntax of jQuery's method for making custom animations is:

$(selector).animate({params},[duration],[easing],[callback])

The key parameter is params. It defines the CSS properties that will be animated. Many properties can be animated at the same time:

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

The second parameter is duration. It specifies the speed of the animation. Possible values are "fast", "slow", "normal", or milliseconds.

Example 1 <script type="text/javascript"> $(document).ready(function(){   $("button").click(function(){     $("div").animate({height:300},"slow");     $("div").animate({width:300},"slow");     $("div").animate({height:100},"slow");     $("div").animate({width:100},"slow");   }); }); </script>

Example 2 <script type="text/javascript"> $(document).ready(function(){   $("button").click(function(){     $("div").animate({left:"100px"},"slow");     $("div").animate({fontSize:"3em"},"slow");   }); }); </script>

	HTML elements are positioned static by default and cannot be moved. To make elements moveable, set the CSS position property to fixed, relative or absolute.

---

jQuery Effects

Here are some examples of effect functions in jQuery: 

Function	Description
$(selector).hide()	Hide selected elements
$(selector).show()	Show selected elements
$(selector).toggle()	Toggle (between hide and show) selected elements
$(selector).slideDown()	Slide-down (show) selected elements
$(selector).slideUp()	Slide-up (hide) selected elements
$(selector).slideToggle()	Toggle slide-up and slide-down of selected elements
$(selector).fadeIn()	Fade in selected elements
$(selector).fadeOut()	Fade out selected elements
$(selector).fadeTo()	Fade out selected elements to a given opacity
$(selector).animate()	Run a custom animation on selected elements