revision:
Syntax: (selector).animate({styles},speed,easing,callback)
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.
Tip: use "+=" or "-=" for relative animations.
Parameters:
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:
backgroundPositionX, backgroundPositionY,
borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth,
borderSpacing,
margin, marginBottom, marginLeft, marginRight, marginTop
opacity,
outlineWidth,
padding, paddingBottom, paddingLeft, paddingRight, paddingTop
height, width, maxHeight, maxWidth, minHeight, minWidth,
fontSize,
bottom, left, right, top,
letterSpacing, wordSpacing,
lineHeight,
textIndent.
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 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.
Alternate syntax: (selector).animate({styles},{options})
Parameters:
styles : required. Specifies one or more CSS properties/values to animate.
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.
<div id="div1">
<button id="btn1">Animate height</button>
<button id="btn2">Reset height</button>
<div id="box" style="background:#98bf21;height:8vw;width:8vw;margin:0.6vw;"></div>
</div>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height: "30vw"});
});
$("#btn2").click(function(){
$("#box").animate({height: "8vw"});
});
});
</script>
Syntax: $(selector).clearQueue(queueName)
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.
Tip: unlike the stop() method (that only works with animation), the clearQueue() method can remove any queued functions.
Parameters:
queueName : optional. Specifies the name of the queue. The default is "fx", the standard effects queue.
<div id="div2">
<button id="start_1">Start Animation</button>
<button id="stop_1">Stop Animation</button>
<br><br>
<div id="divA" style="background:red;height:8vw;width:8vw;"></div>
</div>
<script>
$(document).ready(function(){
$("#start_1").click(function(){
$("#divA").animate({height: 300}, 1500);
$("#divA").animate({width: 300}, 1500);
$("#divA").animate({height: 100}, 1500);
$("#divA").animate({width: 100}, 1500);
});
$("#stop_1").click(function(){
$("#divA").clearQueue();
});
});
</script>
Syntax: span>$(selector).delay(speed,queueName)
The delay() method sets a timer to delay the execution of the next item in the queue.
Parameters:
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
<div id="div_C">
<button id="btn3">Click to fade in boxes with a delay</button>
<br><br>
<div id="div1" style="width:6vw;height:6vw;display:none;background-color:black;"></div><br>
<div id="div2" style="width:6vw;height:6vw;display:none;background-color:green;"></div><br>
<div id="div3" style="width:6vw;height:6vw;display:none;background-color:blue;"></div><br>
<div id="div4" style="width:6vw;height:6vw;display:none;background-color:red;"></div><br>
<div id="div5" style="width:6vw;height:6vw;display:none;background-color:purple;"></div><br>
</div>
<script>
$(document).ready(function(){
$("#btn3").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
$("#div3").delay(800).fadeIn();
$("#div4").delay(2000).fadeIn();
$("#div5").delay(4000).fadeIn();
});
});
</script>
Syntax: $(selector).dequeue(queueName)
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.
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.
Parameters:
queueName : optional. Specifies the name of the queue. The default is "fx", the standard effects queue.
<div id="div_D">
<p><button id="start_2">Start Animation</button></p>
<div id="div6" style="background:blue;height:8vw;width:8vw;">
</div>
<script>
$(document).ready(function(){
$("#start_2").click(function(){
var div = $("#div6");
div.animate({height: 300}, "slow");
div.animate({width: 300}, "slow");
div.queue(function(){
div.css("background-color", "red");
div.dequeue();
});
div.animate({height: 100}, "slow");
div.animate({width: 100}, "slow");
});
});
</script>
</pre>
Syntax: $(selector).fadeIn(speed,easing,callback)
The fadeIn() method gradually changes the opacity, for selected elements, from hidden to visible (fading effect).
Note: Hidden elements will not be displayed at all (no longer affects the layout of the page).
Tip: This method is often used together with the fadeOut() method.
Parameters:
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
This is a paragraph.
<div id="div_E">
<p id="p1">This is a paragraph.</p>
<button class="btn4">Fade out</button>
<button class="btn5">Fade in</button>
</div>
<script>
$(document).ready(function(){
$(".btn4").click(function(){
$("#p1").fadeOut();
});
$(".btn5").click(function(){
$("#p1").fadeIn();
});
});
</script>
Syntax: $(selector).fadeOut(speed,easing,callback)
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).
Tip: This method is often used together with the fadeIn() method.
Parameters:
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
This is a paragraph.
<div id="div_F">
<p id="p2">This is a paragraph.</p>
<button class="btn6">Fade out</button>
<button class="btn7">Fade in</button>
</div>
<script>
$(document).ready(function(){
$(".btn6").click(function(){
$("#p2").fadeOut();
});
$(".btn7").click(function(){
$("#p2").fadeIn();
});
});
</script>
Syntax: $(selector).fadeTo(speed,opacity, easing,callback)
The fadeTo() method gradually changes the opacity, for selected elements, to a specified opacity (fading effect).
Parameters:
speed : optional. Specifies the speed of the fading effect. Default value is 400 milliseconds. 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
This is a paragraph.
<div id="div_G">
<p id="p3">This is a paragraph.</p>
<button class="btn8">Gradually change the opacity of the p element</button>
</div>
<script>
$(document).ready(function(){
$(".btn8").click(function(){
$("#p3").fadeTo(1000, 0.4);
});
});
</script>
Syntax: $(selector).fadeToggle(speed, easing,callback)
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.
Parameters:
speed : optional. Specifies the speed of the fading effect. Default value is 400 milliseconds. 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 fadeOut() method is completed
Demonstrate fadeToggle() with different speed parameters.
<div id="div_H">
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button class="btn9">Click to fade in/out boxes</button><br><br>
<div id="div7" style="width:5vw;height:5vw;background-color:red;"></div><br>
<div id="div8" style="width:5vw;height:5vw;background-color:green;"></div><br>
<div id="div9" style="width:5vw;height:5vw;background-color:blue;"></div>
</div>
<script>
$(document).ready(function(){
$(".btn9").click(function(){
$("#div7").fadeToggle();
$("#div8").fadeToggle("slow");
$("#div9").fadeToggle(3000);
});
});
</script>
Syntax: $(selector).finish(queueName)
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.
Parameters:
queueName : optional. Specifies the name of the queue to stop animations.
<div>
<p>
<button id="start_3">Start Animation</button>
<button id="complete">Finish Current Animation</button>
</p>
<div id="div10"style="background:#98bf21;height:5vw;width:5vw"></div>
</div>
<script>
$(document).ready(function(){
$("#start_3").click(function(){
$("#div10").animate({height: 300}, 3000);
$("#div10").animate({width: 300}, 3000);
});
$("#complete").click(function(){
$("#div10").finish();
});
});
</script>
Syntax: $(selector).hide(speed,easing,callback)
The hide() method hides the selected elements.
Tip: This is similar to the CSS property "display:none".
Note: Hidden elements will not be displayed at all (no longer affects the layout of the page).
Tip: To show hidden elements, look at the show() method.
Parameters:
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 hide() method is completed
This is a paragraph.
<div id="div_J">
<p id="p4">This is a paragraph.</p>
<button class="btn10">Hide</button>
<button class="btn11">Show</button>
</div>
<script>
$(document).ready(function(){
$(".btn10").click(function(){
$("#p4").hide();
});
$(".btn11").click(function(){
$("#p4").show();
});
});
</script>
Syntax: $(selector).queue(queueName)
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. The queue() method can be used together with the dequeue() method.
An element can have several queues. Most often it has only one, the "fx" queue, which is the default jQuery queue.
Parameters:
queueName : optional. Specifies the name of the queue. Default is "fx", the standard effects queue.
The queue length is:
<div id="div_K">
<button class="btn12">Start Animation</button>
<p>The queue length is: <span id="span1"></span></p>
<div id="div11" style="width:5vw;height:5vw;position:relative;left:1vw;top:1vw;background-color:red;"></div>
</div>
<script>
$(document).ready(function(){
$(".btn12").click(function(){
var div = $("#div11");
div.animate({height: 300}, "slow");
div.animate({width: 300}, "slow");
div.animate({height: 100}, "slow");
div.animate({width: 100}, "slow");
$("#span1").text(div.queue().length);
});
});
</script>
Syntax: $(selector).show(speed,easing,callback)
The show() method shows the hidden, selected elements.
Tip: show() works on elements hidden with jQuery methods and "display:none" in CSS (but not visibility:hidden).
Tip: To hide elements, look at the hide() method.
Parameters:
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 hide() method is completed
This is a paragraph.
<div id="div_L">
<p id="p5">This is a paragraph.</p>
<button class="btn13">Hide</button>
<button class="btn14">Show</button>
</div>
<script>
$(document).ready(function(){
$(".btn13").click(function(){
$("#p5").hide();
});
$(".btn14").click(function(){
$("#p5").show();
});
});
</script>
Syntax: $(selector).slideDown(speed,easing,callback)
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).
Tip: To slide-up (hide) elements, look at the slideUp() method.
Parameters:
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
This is a paragraph.
<div id="div_M">
<p id="p6">This is a paragraph.</p>
<button class="btn15">Slide up</button>
<button class="btn16">Slide down</button>
</div>
<script>
$(document).ready(function(){
$(".btn15").click(function(){
$("#p6").slideUp();
});
$(".btn16").click(function(){
$("#p6").slideDown();
});
});
</script>
Syntax: $(selector).slideToggle(speed,easing,callback)
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.
Parameters:
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
This is a paragraph.
<div id="div_N">
<p id="p7">This is a paragraph.</p>
<button class="btn17">Toggle slideUp()/slideDown()</button>
</div>
<script>
$(document).ready(function(){
$(".btn17").click(function(){
$("#p7").slideToggle();
});
});
</script>
Syntax: $(selector).slideUp(speed,easing,callback)
The slideUp() method slides-up (hides) the selected elements.
Tip: To slide-Down (show) elements, look at the slideDown() method.
Parameters:
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
This is a paragraph.
<div id="div_O">
<p id="p8">This is a paragraph.</p>
<button class="btn18">Slide up</button>
<button class="btn19">Slide down</button>
</div>
<script>
$(document).ready(function(){
$(".btn18").click(function(){
$("#p8").slideUp();
});
$(".btn19").click(function(){
$("#p8").slideDown();
});
});
</script>
Syntax: $(selector).stop(stopAll,goToEnd)
The stop() method stops the currently running animation for the selected elements.
Parameters:
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
<div id="div_P">
<p>
<button id="start_5">Start Animation</button>
<button id="stop_5">Stop Current Animation</button>
</p>
<div id="div12" style="background:#98bf21;height:5vw;width:5vw"></div>
</div>
<script>
$(document).ready(function(){
$("#start_5").click(function(){
$("#div12").animate({height: 300}, 3000);
$("#div12").animate({width: 300}, 3000);
});
$("#stop_5").click(function(){
$("#div12").stop();
});
});
</script>
Syntax: $(selector).toggle(speed,easing,callback)
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).
Tip: This method can also be used to toggle between custom functions.
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
This is a paragraph.
<div id="div_P">
<p id="p10">This is a paragraph.</p>
<button id="btn20">Toggle between hide() and show()</button>
</div>
<script>
$(document).ready(function(){
$("#btn20").click(function(){
$("#p10").toggle();
});
});
</script>