Heim > Artikel > Web-Frontend > Zusammenfassung der Verwendung von slideUp(), slideDown(), hide(), show() in jQuery

Zusammenfassung der Verwendung von slideUp(), slideDown(), hide(), show() in jQuery

巴扎黑Original: 2017-06-29 11:03:162080Durchsuche

slideUp(speed,[callback])

Verstecken Sie alle übereinstimmenden Elemente dynamisch, indem Sie die Höhe ändern (nach oben abnehmen) und optional eine Rückruffunktion.

Dieser Animationseffekt passt nur die Höhe des Elements an und kann das passende Element auf „gleitende“ Weise ausblenden.

slideDown(speed,[callback])

Zeigt dynamisch alle passenden Elemente durch Höhenänderungen an (steigt nach unten) und löst optional eine Rückruffunktion aus, nachdem die Anzeige abgeschlossen ist.

Dieser Animationseffekt passt nur die Höhe des Elements an, sodass passende Elemente „gleitend“ angezeigt werden können

hide()

hide Das angezeigte Element

ist die nicht animierte Version von 'hide( speed, [callback] )'. Wenn das ausgewählte Element ausgeblendet ist, ändert diese Methode nichts.

show()

Versteckte übereinstimmende Elemente anzeigen.

Dies ist die nicht animierte Version von „show( speed, [callback] )“. Wenn das ausgewählte Element sichtbar ist, ändert diese Methode nichts. Diese Methode funktioniert unabhängig davon, ob das Element über die Methode hide() ausgeblendet ist oder display:none; in CSS festgelegt ist.

<head>
<title>slideUp()和slideDown()</title>
<style type="text/css">
<!--
body{
 background:url(bg.jpg);
}
img{
 border:1px solid #000000;
 margin:8px;
}
input{
 border:1px solid #000000;
 font-size:13px; padding:2px;
 font-family:Arial, Helvetica, sans-serif;
 background-color:#FFFFFF;
 color:#000000;
}
p{
 background-color:#FFFF00;
 height:80px; width:80px;
 border:1px solid #000000;
 float:left; margin-top:8px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
 $("input:eq(0)").click(function(){
  $("p").add("img").slideUp(1000);
 });
 $("input:eq(1)").click(function(){
  $("p").add("img").slideDown(1000);
 });
 $("input:eq(2)").click(function(){
  $("p").add("img").hide(1000);
 });
 $("input:eq(3)").click(function(){
  $("p").add("img").show(1000);
 });
});
</script>
</head>
<body>
 <input type="button" value="SlideUp">
 <input type="button" value="SlideDown">
 <input type="button" value="Hide">
 <input type="button" value="Show"><br>
 <p></p><img src="test.jpg">
</body>

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von slideUp(), slideDown(), hide(), show() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Drei Vererbungsmethoden und ihre Vor- und Nachteile in jsNächster Artikel：Drei Vererbungsmethoden und ihre Vor- und Nachteile in js

In Verbindung stehende Artikel

Mehr sehen