Zusammenfassung der Verwendung von slideUp(), slideDown(), hide(), show() in jQuery-js-Tutorial-php.cn

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

巴扎黑

Freigeben： 2017-06-29 11:03:16

Original

2079 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!