SkillsBattle HOME
JQUERY REACT SASS Online HTML Editor

jQuery Basic

jQuery Home jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events

jQuery Effects

jQuery Show/Hide jQuery Fade jQuery Slide jQuery Animation jQuery Stop jQuery Chaining jQuery Callback

jQuery manipulation

jQuery Get/Set jQuery Insert jQuery Remove jQuery CSS Classes jQuery Style Properties jQuery Dimensions

jQuery advanced

jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering jQuery Ajax jQuery Load jQuery Get/Post jQuery No-Conflict

jQuery Exercises

jQuery Practice Examples jQuery Quiz

jQuery References

jQuery Overview jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Misc jQuery Properties

jQuery Effect Methods

<< Prev Next >>

The following table lists all the jQuery methods for creating animation effects.

Method Description
animate() Runs a custom animation on the selected elements
clearQueue() Removes all remaining queued functions from the selected elements
delay() Sets a delay for all queued functions on the selected elements
dequeue() Removes the next function from the queue, and then executes the function
fadeIn() Fades in the selected elements
fadeOut() Fades out the selected elements
fadeTo() Fades in/out the selected elements to a given opacity
fadeToggle() Toggles between the fadeIn() and fadeOut() methods
finish() Stops, removes and completes all queued animations for the selected elements
hide() Hides the selected elements
queue() Shows the queued functions on the selected elements
show() Shows the selected elements
slideDown() Slides-down (shows) the selected elements
slideToggle() Toggles between the slideUp() and slideDown() methods
slideUp() Slides-up (hides) the selected elements
stop() Stops the currently running animation for the selected elements
toggle() Toggles between the hide() and show() methods

jQuery animate() Method

The animate() method performs a custom animation of a set of CSS properties

This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.

Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element.

Syntax:

(selector).animate({styles}, speed, easing, callback)

Parameter Description
styles Required. Specifies one or more CSS properties/values to animate.

Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.

Properties that can be animated:

Click to try yourself- Below link.....


Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element.
speed Optional. Specifies the speed of the animation. Default value is 400 milliseconds

Possible values:

  • milliseconds (like 100, 1000, 5000, etc)
  • "slow"
  • "fast"
easing Optional. Specifies/define the speed of the element in different points of the animation. Default value is "swing". Possible values:
  • "swing" - moves slower at the beginning/end, but faster in the middle
  • "linear" - moves in a constant speed
Tip: More easing functions are available in external plugins.
callback Optional. A function to be executed after the animation completes. To learn more about callback, please read our jQuery Callback chapter

Alternate Syntax

(selector).animate({styles},{options})

Parameter Description
styles Required. Specifies one or more CSS properties/values to animate (See possible values above)
options Optional. define additional options for the animation. Possible values:
  • duration - sets the speed of the animation
  • easing - specifies the easing function to use
  • complete - specifies a function to be executed after the animation completes
  • step - specifies a function to be executed for each step in the animation
  • progress - specifies a function to be executed after each step in the animation
  • queue - a Boolean value specifying whether or not to place the animation in the effects queue
  • specialEasing - a map of one or more CSS properties from the styles parameter, and their corresponding easing functions
  • start - specifies a function to be executed when the animation begins
  • done - specifies a function to be executed when the animation ends
  • fail - specifies a function to be executed if the animation fails to complete
  • always - specifies a function to be executed if the animation stops without completing

Example

"Animate" an element, by changing its height

$("button").click(function(){
  $("#box").animate({height: "300px"});
});
Try it Yourself

jQuery clearQueue() Method

The clearQueue() method removes all items from the queue that have not yet been run. Note that when a function has started to run, it runs until it is completed.

Related methods

  • queue() - Shows the queued functions
  • dequeue() - Removes the next function from the queue, and then executes the function

Syntax:

$(selector).clearQueue(queueName)

Parameter Description
queueName Optional. Specifies the name of the queue

The default is "fx", the standard effects queue

Example

$("button").click(function(){
  $("div").clearQueue();
});
Try it Yourself

jQuery delay() Method

The delay() method sets a timer to delay the execution of the next item in the queue.

Syntax:

$(selector).delay(speed,queueName)

Parameter Description
speed Optional. Specifies the speed of the delay

Possible values:

  • milliseconds
  • "slow"
  • "fast"
queueName Optional. Specifies the name of the queue

Default is "fx", the standard effects queue

Example

$("button").click(function(){
  $("#div1").delay("slow").fadeIn();
  $("#div2").delay("fast").fadeIn();
});
Try it Yourself

jQuery dequeue() Method

The dequeue() method removes the next function from the queue, and then executes the function.

A queue is one or more function(s) waiting to run.

The dequeue() method is used together with the queue() method.

An element can have several queues. Most often it has only one, the "fx" queue, which is the default jQuery queue.

Note: You should ensure that the dequeue() method is called after adding a function with queue(), to allow the process to continue.

Syntax:

$(selector).dequeue(queueName)

Parameter Description
queueName Optional. Specifies the name of the queue

Default is "fx", the standard effects queue

Example

$("div").queue(function(){
  $("div").css("background-color", "red");
  $("div").dequeue();
});
Try it Yourself

jQuery fadeIn() Method

The fadeIn() method gradually changes the opacity, for selected elements, from hidden to visible (fading effect).

Syntax:

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

Parameter Description
speed Optional. Specifies the speed of the fading effect. Default value is 400 milliseconds

Possible values:

  • milliseconds
  • "slow"
  • "fast"
easing Optional. Specifies the speed of the element in different points of the animation. Default value is "swing"

Possible values:

  • "swing" - moves slower at the beginning/end, but faster in the middle
  • "linear" - moves in a constant speed
Tip: More easing functions are available in external plugins
callback Optional. A function to be executed after the fadeIn() method is completed

To learn more about callback, visit our jQuery Callback chapter

Example

Fade in all <p> elements:

$("button").click(function(){
  $("p").fadeIn();
});
Try it Yourself

jQuery fadeOut() Method

The fadeOut() method gradually changes the opacity, for selected elements, from visible to hidden (fading effect).

Note: Hidden elements will not be displayed at all (no longer affects the layout of the page).

Syntax:

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

Parameter Description
speed Optional. Specifies the speed of the fading effect. Default value is 400 milliseconds

Possible values:

  • milliseconds
  • "slow"
  • "fast"
easing Optional. Specifies the speed of the element in different points of the animation. Default value is "swing"

Possible values:

  • "swing" - moves slower at the beginning/end, but faster in the middle
  • "linear" - moves in a constant speed
Tip: More easing functions are available in external plugins
callback Optional. A function to be executed after the fadeOut() method is completed

To learn more about callback, visit our jQuery Callback chapter

Example

Fade out all <p> elements

$("button").click(function(){
  $("p").fadeOut();
});
Try it Yourself

jQuery fadeTo() Method

The fadeTo() method gradually changes the opacity, for selected elements, to a specified opacity (fading effect).

Syntax:

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

Parameter Description
speed Required. Specifies the speed of the fading effect.

Possible values:

  • milliseconds
  • "slow"
  • "fast"
opacity Required. Specifies the opacity to fade to. Must be a number between 0.00 and 1.00
easing Optional. Specifies the speed of the element in different points of the animation. Default value is "swing"

Possible values:

  • "swing" - moves slower at the beginning/end, but faster in the middle
  • "linear" - moves in a constant speed
Tip: More easing functions are available in external plugins
callback Optional. A function to be executed after the fadeTo() method is completed

To learn more about callback, visit our jQuery Callback chapter

Example

$("button").click(function(){
  $("p").fadeTo(1000, 0.4);
});
Try it Yourself

jQuery fadeToggle() Method

The fadeToggle() method toggles between the fadeIn() and fadeOut() methods.

If the elements are faded out, fadeToggle() will fade them in.

If the elements are faded in, fadeToggle() will fade them out.

number

Syntax:

$(selector).fadeToggle(speed,easing,callback)

Parameter Description
speed Optional. Specifies the speed of the fading effect. Default value is 400 milliseconds

Possible values:

  • milliseconds
  • "slow"
  • "fast"
easing Optional. Specifies the speed of the element in different points of the effect. Default value is "swing"

Possible values:

  • "swing" - moves slower at the beginning/end, but faster in the middle
  • "linear" - moves in a constant speed
Tip: More easing functions are available in external plugins
callback Optional. A function to be executed after the fadeToggle() method is completed

To learn more about callback, please read our jQuery Callback chapter

Example

$("button").click(function(){
  $("#div1").fadeToggle();
});
Try it Yourself

jQuery finish() Method

The finish() method stops the currently-running animations, removes all queued animations, and completes all animations for the selected elements.

This method is similar to the .stop(true,true) method, except that finish() also causes the CSS property of all queued animations to stop.

Syntax:

$(selector).finish(queueName)

Parameter Description
queueName Optional. Specifies the name of the queue to stop animations

Example

$("#complete").click(function(){
  $("div").finish();
});
Try it Yourself

jQuery hide() Method

The hide() method hides the selected elements.

This is similar to the CSS property display:none.

Syntax:

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

Parameter Description
speed Optional. Specifies the speed of the hide effect. Default value is 400 milliseconds

Possible values:

  • milliseconds
  • "slow"
  • "fast"
easing Optional. Specifies the speed of the element in different points of the animation. Default value is "swing"

Possible values:

  • "swing" - moves slower at the beginning/end, but faster in the middle
  • "linear" - moves in a constant speed
Tip: More easing functions are available in external plugins
callback Optional. A function to be executed after the hide() method is completed

To learn more about callback, visit our jQuery Callback chapter

Example

Hide all <p> elements

$("button").click(function(){
  $("p").hide();
});
Try it Yourself

jQuery queue() Method

The queue() method shows the queue of functions to be executed on the selected elements. A queue is one or more function(s) waiting to run

number

Syntax:

$(selector).queue(queueName)

Parameter Description
queueName Optional. Specifies the name of the queue

Default is "fx", the standard effects queue

Example

Display the length of a queue in a <span> element:

$("span").text(div.queue().length); 
Try it Yourself

jQuery show() Method

The show() method shows the hidden, selected elements.

Note: show() works on elements hidden with jQuery methods and display:none in CSS (but not visibility:hidden).

Syntax:

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

Parameter Description
speed Optional. Specifies the speed of the show effect. Default value is 400 milliseconds

Possible values:

  • milliseconds
  • "slow"
  • "fast"
easing Optional. Specifies the speed of the element in different points of the animation. Default value is "swing"

Possible values:

  • "swing" - moves slower at the beginning/end, but faster in the middle
  • "linear" - moves in a constant speed
Tip: More easing functions are available in external plugins
callback Optional. A function to be executed after the show() method is completed

To learn more about callback, visit our jQuery Callback chapter

Example

Show all hidden <p> elements

$("button").click(function(){
  $("p").show();
});
Try it Yourself

jQuery slideDown() Method

The slideDown() method slides-down (shows) the selected elements

Note: slideDown() works on elements hidden with jQuery methods and display:none in CSS (but not visibility:hidden).

Syntax:

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

Parameter Description
speed Optional. Specifies the speed of the slide effect. Default value is 400 milliseconds

Possible values:

  • milliseconds
  • "slow"
  • "fast"
easing Optional. Specifies the speed of the element in different points of the animation. Default value is "swing"

Possible values:

  • "swing" - moves slower at the beginning/end, but faster in the middle
  • "linear" - moves in a constant speed
Tip: More easing functions are available in external plugins.
callback Optional. A function to be executed after the slideDown() method is completed

To learn more about callback, visit our jQuery Callback chapter

Example

Slide-down (show) all hidden <p> elements:

$("button").click(function(){
  $("p").slideDown();
});
Try it Yourself

jQuery slideToggle() Method

The slideToggle() method toggles between slideUp() and slideDown() for the selected elements

This method checks the selected elements for visibility. slideDown() is run if an element is hidden. slideUp() is run if an element is visible - This creates a toggle effect.

Syntax:

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

Parameter Description
speed Optional. Specifies the speed of the slide effect. Default value is 400 milliseconds

Possible values:

  • milliseconds
  • "slow"
  • "fast"
easing Optional. Specifies the speed of the element in different points of the animation. Default value is "swing"

Possible values:

  • "swing" - moves slower at the beginning/end, but faster in the middle
  • "linear" - moves in a constant speed
Tip: More easing functions are available in external plugins
callback Optional. A function to be executed after the slideToggle() method is completed

To learn more about callback, visit our jQuery Callback chapter

Example

Toggle between slideUp() and slideDown() for all <p> elements

$("button").click(function(){
  $("p").slideToggle();
});
Try it Yourself

jQuery slideUp() Method

The slideUp() method slides-up (hides) the selected elements

Note: Hidden elements will not be displayed at all (no longer affects the layout of the page)

Syntax:

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

Parameter Description
speed Optional. Specifies the speed of the slide effect. Default value is 400 milliseconds

Possible values:

  • milliseconds
  • "slow"
  • "fast"
easing Optional. Specifies the speed of the element in different points of the animation. Default value is "swing"

Possible values:

  • "swing" - moves slower at the beginning/end, but faster in the middle
  • "linear" - moves in a constant speed
Tip: More easing functions are available in external plugins
callback Optional. A function to be executed after the slideUp() method is completed

To learn more about callback, visit our jQuery Callback chapter

Example

Slide-up (hide) all <p> elements

$("button").click(function(){
  $("p").slideUp();
});
Try it Yourself

jQuery stop() Method

The stop() method stops the currently running animation for the selected elements.

Syntax:

$(selector).stop(stopAll,goToEnd)

Parameter Description
stopAll Optional. A Boolean value specifying whether or not to stop the queued animations as well. Default is false
goToEnd Optional. A Boolean value specifying whether or not to complete all animations immediately. Default is false

Example

$("#stop").click(function(){
  $("div").stop();
});
Try it Yourself

jQuery toggle() Method

The toggle() method toggles between hide() and show() for the selected elements

This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect.

Note: Hidden elements will not be displayed at all (no longer affects the layout of the page).

Syntax:

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

Parameter Description
speed Optional. Specifies the speed of the hide/show effect

Possible values:

  • milliseconds
  • "slow"
  • "fast"
easing Optional. Specifies the speed of the element in different points of the animation. Default value is "swing"

Possible values:

  • "swing" - moves slower at the beginning/end, but faster in the middle
  • "linear" - moves in a constant speed
Tip: More easing functions are available in external plugins
callback Optional. A function to be executed after the toggle() method is completed

To learn more about callback, visit our jQuery Callback chapter

Example

Toggle between hide and show for all <p> elements

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

We will learn about html references in next chapter Click

<< Prev Next >>