Heim > Web-Frontend > js-Tutorial > Hauptteil

Zusammenfassung der jQuery-Methoden zum Steuern der Elementanzeige, des Ausblendens, Umschaltens und der Sliding_jquery

WBOY
Freigeben: 2016-05-16 16:03:37
Original
1650 Leute haben es durchsucht

jQuery ein- und ausblenden

Durch die beiden Funktionen hide() und show() unterstützt jQuery das Ausblenden und Anzeigen von HTML-Elementen:
Beispiel

Code kopieren Der Code lautet wie folgt:

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

Sowohl hide() als auch show() können zwei optionale Parameter festlegen: Geschwindigkeit und Rückruf.
Syntax:
Code kopieren Der Code lautet wie folgt:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)


Der Geschwindigkeitsparameter gibt die Geschwindigkeit an, mit der ein- oder ausgeblendet werden soll. Diese Werte können eingestellt werden: „langsam“, „schnell“, „normal“ oder Millisekunden.
Der Callback-Parameter ist der Name der Funktion, die ausgeführt werden soll, nachdem die Funktion zum Ausblenden oder Anzeigen abgeschlossen ist. Später in diesem Tutorial erfahren Sie mehr über den Callback-Parameter.
Beispiel
Code kopieren Der Code lautet wie folgt:

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

Der Callback-Parameter ist der Name der Funktion, die nach Abschluss dieser Funktion ausgeführt werden soll. Später in diesem Tutorial erfahren Sie mehr über den Callback-Parameter.

jQuery-Schiebefunktion – slideDown, slideUp, slideToggle

jQuery verfügt über die folgenden Gleitfunktionen:

Code kopieren Der Code lautet wie folgt:

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

Der Geschwindigkeitsparameter kann folgende Werte festlegen: „langsam“, „schnell“, „normal“ oder Millisekunden.
Der Callback-Parameter ist der Name der Funktion, die nach Abschluss dieser Funktion ausgeführt werden soll. Später in diesem Tutorial erfahren Sie mehr über den Callback-Parameter.
slideDown()-Instanz
Code kopieren Der Code lautet wie folgt:

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

jQuery Fade-Funktion – fadeIn(), fadeOut(), fadeTo()
jQuery verfügt über die folgende Fade-Funktion:
Code kopieren Der Code lautet wie folgt:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

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


Der Geschwindigkeitsparameter kann folgende Werte festlegen: „langsam“, „schnell“, „normal“ oder Millisekunden.
Der Opazitätsparameter in der Funktion fadeTo() gibt die Überblendung auf eine bestimmte Opazität an.
Der Callback-Parameter ist der Name der Funktion, die nach Abschluss dieser Funktion ausgeführt werden soll. Später in diesem Tutorial erfahren Sie mehr über den Callback-Parameter.

benutzerdefinierte jQuery-Animation

Syntax zum Erstellen benutzerdefinierter Animationen mithilfe der jQuery-Funktion:

Code kopieren Der Code lautet wie folgt:

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

Die Schlüsselparameter sind Parameter. Es definiert die CSS-Eigenschaften, die animiert werden. Es können mehrere solcher Eigenschaften gleichzeitig festgelegt werden:
Code kopieren Der Code lautet wie folgt:

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

Der zweite Parameter ist die Dauer. Es definiert die Zeit, die für die Anwendung auf die Animation verwendet wird. Die eingestellten Werte sind: „langsam“, „schnell“, „normal“ oder Millisekunden.
Beispiel
Code kopieren Der Code lautet wie folgt:


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