Heim > Web-Frontend > js-Tutorial > jQuery-Steuerelement zum Ausblenden und Anzeigen von Beispielfreigaben

jQuery-Steuerelement zum Ausblenden und Anzeigen von Beispielfreigaben

小云云
Freigeben: 2018-01-23 14:42:11
Original
1531 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Kenntnisse zum Ausblenden und Anzeigen von jQuery-Steuerelementen vorgestellt, die einen guten Referenzwert haben. Werfen wir einen Blick auf den folgenden Editor. Ich hoffe, er kann allen helfen.

1. Ausblenden und Anzeigen von jQuery-Effekten

Mit jQuery können Sie die Methoden hide() und show() verwenden, um HTML-Elemente auszublenden und anzuzeigen:


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

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

2. jQuery-Fade-Effekt

Mit jQuery können Sie den Fade-Effekt von Elementen erzielen.

jQuery verfügt über die folgenden vier Fade-Methoden:

  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"的元素;
Nach dem Login kopieren

3. jQuery-Gleiteffekt

Mit jQuery können Sie Gleiteffekte auf Elementen erstellen.

jQuery verfügt über die folgenden Gleitmethoden:

  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的元素向上或向下滑动;
Nach dem Login kopieren

Verwandte Empfehlungen:

Detaillierte Erklärung mehrerer versteckter HTML-Codes Elements-Methode

Lösung zum Ausblenden von Elementen nach der Bindung von jquery toggle to page elements_jquery

Mehrere Möglichkeiten zum Ausblenden von HTML-Elementen_HTML/Xhtml _Webseitenproduktion


Das obige ist der detaillierte Inhalt vonjQuery-Steuerelement zum Ausblenden und Anzeigen von Beispielfreigaben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage