jQuery Tutorial Tutorials - jQuery .toggle()

jQuery .toggle()

The .toggle() method in jQuery is used to toggle all matched elements. If the element is visible ,then hide it. If the element is hidden ,then display it.

jQuery .toggle() syntax

.toggle(display);
.toggle([duration][,complete]);
.toggle(options)
.toggle(duration[,easing][,complete]);
Parameter Type Description
display Boolean Use true to show the element or false to hide it.
duration Number,String the time animation running,Default 400ms(normal) fast:200ms slow:600ms
complete Function A function to execute when the animation is complete.
easing String an easing function for the transition. Default swing
options - queue Boolean,String A Boolean indicating whether to place the animation in the effects queue.
options - specialEasing PlainObject An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions.
options - step Function A function to modify the Tween object to change the value of the property before it is set.
options - progress Function A function to be called after each step of the animation
options - complete Function A function to be called when animation is complete
options - start Function A function to be called when animation begins
options - done Function A function to be called when the animation on an element completes
options - fail Function A function to be called when the animation on an element fails to complete
options - always Function A function always to be called,no matter whether it completes or not

.toggle()

example

Toggles all td elements

$("td").toggle();

.toggle(duration[,easing][,complete])

example

Shows all paragraphs if they are hidden and hide them if they are visible,completing the animation within 600 milliseconds.

$("p").toggle("slow");

.toggle([duration][,complete])

example

Shows all the paragraphs in 2000 milliseconds duration,when the animation is completed,alert a message

$("p").toggle(2000,function(){
   alert("Animation Done.");
 });

.toggle(display)

Shows all paragraphs, then hides them all, back and forth.

$('p').toggle(showORhide);
// is equivalent to 
if(showORhide){
    $('p').show();
}else{
    $('p').hide();
}

example

$( "p" ).toggle( flip++ % 2 === 0 );

jQuery .toggle() Examples

Try now

Date：2019-08-30 01:30:53 From:www.Lautturi.com author：Lautturi
.dequeue()
.animate()