jQuery control element hiding and showing example sharing

This article mainly introduces the relevant knowledge about hiding and displaying jQuery control elements, which has a good reference value. Let's take a look with the editor below, I hope it can help everyone.

1. jQuery hiding and showing effects

With jQuery, you can use the hide() and show() methods to hide and show HTML elements:

$("#hide").click(function(){
 $("p").hide();
}); //点击id="hide"元素时，隐藏所有<p>标签内容；

$("#show").click(function(){
 $("p").show();
}); //点击id="show"元素时，显示所有<p>标签内容；

2. jQuery fade-in and fade-out effect

With jQuery, you can achieve the fade-in and fade-out effect of elements.

jQuery has the following four fade methods:

1. fadeIn()

2. fadeOut()

3. fadeToggle()

4. ##fadeTo()

//jQuery fadeIn() 用于淡入已隐藏的元素；
$(selector).fadeIn(speed,callback);
//speed(可选)参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒；
//callback(可选) 参数是 fading 完成后所执行的函数名称；
$("button").click(function(){
 $("#p1").fadeIn();
 $("#p2").fadeIn("slow");
 $("#p3").fadeIn(3000);
}); //点击<button>按钮时，不同效果的淡入id分别为"p1,p2,p3"的元素；
//jQuery fadeOut() 方法用于淡出可见元素；
$(selector).fadeOut(speed,callback);
//speed(可选)参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒；
//callback(可选) 参数是 fading 完成后所执行的函数名称；
$("button").click(function(){
 $("#p1").fadeOut();
 $("#p2").fadeOut("slow");
 $("#p3").fadeOut(3000);
}); //点击<button>按钮时，不同效果的淡出id分别为"p1,p2,p3"的元素；
//jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换；
//如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果；
//如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果；
$(selector).fadeToggle(speed,callback);
//speed(可选)参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒；
//callback(可选) 参数是 fading 完成后所执行的函数名称；
$("button").click(function(){
 $("#p1").fadeToggle();
 $("#p2").fadeToggle("slow");
 $("#p3").fadeToggle(3000);
}); //点击<button>按钮时，不同效果的淡出淡入id分别为"p1,p2,p3"的元素；
//jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）；
$(selector).fadeTo(speed,opacity,callback);
//speed(必选)参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒；
//opacity(必选)参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）；
//callback(可选) 参数是 fading 完成后所执行的函数名称；
$("button").click(function(){
 $("#p1").fadeTo("slow",0.15);
 $("#p2").fadeTo("slow",0.4);
 $("#p3").fadeTo("slow",0.7);
}); //点击<button>按钮时，以给出的不透明度淡入淡出id分别为"p1,p2,p3"的元素；

3 ,jQuery sliding effect

With jQuery, you can create sliding effects on elements.

jQuery has the following sliding methods:

1. slideDown()

2. slideUp()

3. slideToggle()

//jQuery slideDown() 方法用于向下滑动元素；
$(selector).slideDown(speed,callback);
//speed(可选)参数规定效果的时长，它可以取以下值："slow"、"fast" 或毫秒；
//callback(可选)参数是滑动完成后所执行的函数名称；
$("#flip").click(function(){
 $("#panel").slideDown();
}); //点击id为flip的元素时，将id为panel的元素向下滑动；
//jQuery slideUp() 方法用于向上滑动元素；
$(selector).slideUp(speed,callback);
//speed(可选)参数规定效果的时长，它可以取以下值："slow"、"fast" 或毫秒；
//callback(可选)参数是滑动完成后所执行的函数名称；
$("#flip").click(function(){
 $("#panel").slideUp();
}); //点击id为flip的元素时，将id为panel的元素向上滑动；
//jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换；
//如果元素向下滑动，则 slideToggle() 可向上滑动它们；
//如果元素向上滑动，则 slideToggle() 可向下滑动它们；
$(selector).slideToggle(speed,callback);
//speed(可选)参数规定效果的时长，它可以取以下值："slow"、"fast" 或毫秒；
//callback(可选)参数是滑动完成后所执行的函数名称；
$("#flip").click(function(){
 $("#panel").slideToggle();
}); //点击id为flip的元素时，将id为panel的元素向上或向下滑动；

Related recommendations:

Detailed explanation of several ways to hide Html elements

Solution to hiding elements after binding jquery toggle to page elements_jquery

Several ways to hide Html elements_HTML/Xhtml_Web page Make

The above is the detailed content of jQuery control element hiding and showing example sharing. For more information, please follow other related articles on the PHP Chinese website!