jQuery control element display hide switch slide method summary

jQuery hide and display

jQuery supports hiding and displaying HTML elements through hide() and show() functions:
The instance

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

Both hide() and show() can be set to two optional parameters: speed and callback.
Grammar:

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

The speed parameter specifies how fast to show or hide. You can set these values: "slow", "fast", "normal", or milliseconds.
The callback parameter is the name of the function to be executed after the hide or show functions are completed. You will learn more about the callback parameter in the sections below this tutorial.
The instance

$("button").click(function(){

$("p").hide(1000);

});

The callback parameter is the name of the function to be executed after the function is completed. You will learn more about the callback parameter in the sections below this tutorial.

jQuery sliding functions - slideDown, slideUp, slideToggle

jQuery has the following sliding functions:

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

The speed parameter can be set to these values: "slow", "fast", "normal" or milliseconds.
The callback parameter is the name of the function to be executed after the function is completed. You will learn more about the callback parameter in the section below this tutorial.
Examples of slideDown ()

$(".flip").click(function(){

$(".panel").slideDown();

});

jQuery Fade functions - fadeIn(), fadeOut(), fadeTo()
jQuery has the following fade functions:

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

The speed parameter can be set to these values: "slow", "fast", "normal" or milliseconds.
The opacity parameter in the fadeTo() function is specified to reduce to a given opacity.
The callback parameter is the name of the function to be executed after the function is completed. You will learn more about the callback parameters in the sections below this tutorial.

jQuery custom animation

The jQuery function creates a custom animation syntax:

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

The key parameter is params. It defines the CSS property that produces the animation. Multiple such properties can be set at the same time:

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

The second parameter is duration. It defines the time to apply to the animation. It sets values of "slow", "fast", "normal" or milliseconds.
The instance

<script type="text/javascript">

$(document).ready(function(){

$("#start").click(function(){

$("#box").animate({height:300},"slow");

$("#box").animate({width:300},"slow");

$("#box").animate({height:100},"slow");

$("#box").animate({width:100},"slow");

});

});

</script> 

函数	描述
$(selector).hide()	隐藏被选元素
$(selector).show()	显示被选元素
$(selector).toggle()	切换（在隐藏与显示之间）被选元素
$(selector).slideDown()	向下滑动（显示）被选元素
$(selector).slideUp()	向上滑动（隐藏）被选元素
$(selector).slideToggle()	对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()	淡入被选元素
$(selector).fadeOut()	淡出被选元素
$(selector).fadeTo()	把被选元素淡出为给定的不透明度
$(selector).animate()	对被选元素执行自定义动画