Summary of jQuery methods for controlling element display, hiding, switching, and sliding_jquery

jQuery Hide and Show

Through the two functions hide() and show(), jQuery supports hiding and showing HTML elements:
Example

Copy code The code is as follows:

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

Both hide() and show() can set two optional parameters: speed and callback.
Syntax:

Copy code The code is as follows:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

The speed parameter specifies the speed at which to show or hide. These values ​​can be set: "slow", "fast", "normal" or milliseconds.
The callback parameter is the name of the function to be executed after the hide or show function completes. You'll learn more about the callback parameter later in this tutorial.
Example

Copy code The code is as follows:

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

The callback parameter is the name of the function to be executed after this function completes. You'll learn more about the callback parameter later in this tutorial.

jQuery sliding function - slideDown, slideUp, slideToggle

jQuery has the following sliding functions:

Copy code The code is as follows:

$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)

The speed parameter can set these values: "slow", "fast", "normal" or milliseconds.
The callback parameter is the name of the function to be executed after this function completes. You'll learn more about the callback parameter later in this tutorial.
slideDown() instance

Copy code The code is as follows:

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

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

Copy code The code is as follows:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

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

The speed parameter can set these values: "slow", "fast", "normal" or milliseconds.
The opacity parameter in the fadeTo() function specifies the fade to a given opacity.
The callback parameter is the name of the function to be executed after this function completes. You'll learn more about the callback parameter later in this tutorial.

jQuery custom animation

Syntax for creating custom animations using jQuery function:

Copy code The code is as follows:

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

The key parameters are params. It defines the CSS properties that animate. Multiple such properties can be set simultaneously:

Copy code The code is as follows:

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

The second parameter is duration. It defines the time used to apply to the animation. The values ​​it sets are: "slow", "fast", "normal" or milliseconds.
Example

Copy code The code is as follows:

<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()	对被选元素执行自定义动画