jquery implementiert Gleiteffekte code_jquery-js-Tutorial-php.cn

jquery implementiert Gleiteffekte code_jquery

WBOY

Freigeben： 2016-05-16 15:46:07

Original

1256 Leute haben es durchsucht

Im Projekt ist die Verwendung von JQuery erforderlich, um den Gleiteffekt zu erzielen. Daher ist die folgende Einführung sehr detailliert und enthält eine Textbeschreibung und eine Codeanalyse lernen.

Implementierungsmethode eins:

.slideUp([duration][,complete]) – Das Zielelement wird nach oben verschoben und ausgeblendet .slideDown([duration][,complete]) – Das Zielelement wird nach unten verschoben, um
anzuzeigen .slideToggle([duration][,complete]) – Wenn das Zielelement ausgeblendet ist, schieben Sie es nach unten, um es anzuzeigen, andernfalls nach oben, um es auszublenden

Hinweis: „Duration“ ist das Zeitintervall für die Methodenausführung und „Complete“ ist die Rückruffunktion.

<!DOCTYPE html> 
<html lang="zh_CN"> 
<head> 
 <meta charset="UTF-8"> 
 <title>滑动效果</title> 
 <script src="js/jquery-2.1.3.min.js"></script> 
 <script src="js/slide.js"></script> 
 <style> 
  img{ 
   width:500px; 
  } 
 </style> 
</head> 
<body> 
<div> 
 <div> 
  <button id="btn1">向上划入隐藏</button> 
  <button id="btn2">向下滑出显示</button> 
  <button id="btn3">向上划入隐藏/向下滑出显示</button> 
 </div> 
 <img src="images/2.jpg"/> 
</div> 
</body> 
</html>

Nach dem Login kopieren

slide.js-Code:

/*滑动效果*/ 
$(document).ready(function(){ 
 //向上滑入 
 $('#btn1').click(function(){ 
  $('img').slideUp(2000); 
 }); 
 //向下滑出 
 $('#btn2').click(function(){ 
  $('img').slideDown(2000); 
 }); 
 //切换滑动 
 $('#btn3').click(function(){ 
  $('img').slideToggle(2000); 
 }); 
})

Nach dem Login kopieren

Implementierungsmethode zwei:

1. jQuery___-Effekt (Gleiteffekt)

slideDown(speed, [callback])

Übersicht

Zeigt alle übereinstimmenden Elemente dynamisch an, indem ihre Höhe geändert (nach unten erhöht) wird, und löst optional eine Rückruffunktion aus, nachdem die Anzeige abgeschlossen ist.
Dieser Animationseffekt passt lediglich die Höhe des Elements an, sodass passende Elemente „gleitend“ angezeigt werden können. In jQuery 1.3 werden auch der obere und untere Abstand sowie der Rand animiert und der Effekt wird glatter.

Parameter

speedString,Number

Eine Zeichenfolge mit einer von drei vorgegebenen Geschwindigkeiten („langsam“, „normal“ oder „schnell“) oder ein Millisekundenwert, der die Animationsdauer darstellt (z. B. 1000)

Rückruf (optional)FunktionFunktion

Funktion wird ausgeführt, wenn die Animation abgeschlossen ist

Beispiel

Beschreibung:

Schieben Sie den Absatz in 600 Millisekunden langsam nach unten

jQuery-Code:

$("p").slideDown("slow");

Nach dem Login kopieren

Beschreibung:

Verwenden Sie 200 Millisekunden, um den Absatz schnell nach unten zu schieben. Anschließend wird ein Dialogfeld angezeigt

jQuery-Code:

$("p").slideDown("fast",function(){ 
 alert("Animation Done."); 
});

Nach dem Login kopieren

slideUp(speed, [callback])

Übersicht

Verstecken Sie alle übereinstimmenden Elemente dynamisch, indem Sie ihre Höhe ändern (nach oben abnehmen) und optional eine Rückruffunktion auslösen, nachdem das Ausblenden abgeschlossen ist.

Dieser Animationseffekt passt nur die Höhe des Elements an, sodass passende Elemente „gleitend“ ausgeblendet werden können. In jQuery 1.3 werden auch der obere und untere Abstand sowie der Rand animiert und der Effekt wird glatter.

Parameter

speedString,Number

Eine Zeichenfolge mit einer von drei vorgegebenen Geschwindigkeiten („langsam“, „normal“ oder „schnell“) oder ein Millisekundenwert, der die Animationsdauer darstellt (z. B. 1000)

Rückruf (optional)Funktion

Funktion wird ausgeführt, wenn die Animation abgeschlossen ist

Beispiel

Beschreibung:

Schieben Sie den Absatz in 600 Millisekunden langsam nach oben

jQuery-Code:

$("p").slideUp("slow");

Nach dem Login kopieren

Beschreibung:

Verwenden Sie 200 Millisekunden, um den Absatz schnell nach oben zu schieben. Anschließend wird ein Dialogfeld angezeigt

jQuery-Code:

$("p").slideUp("fast",function(){ 
 alert("Animation Done."); 
});

Nach dem Login kopieren

slideToggle(speed, [callback])

Übersicht

Schaltet die Sichtbarkeit aller übereinstimmenden Elemente über eine Höhenänderung um und löst optional eine Rückruffunktion aus, wenn das Umschalten abgeschlossen ist.

Dieser Animationseffekt passt nur die Höhe des Elements an, sodass passende Elemente „gleitend“ ausgeblendet oder angezeigt werden können. In jQuery 1.3 werden auch der obere und untere Abstand sowie der Rand animiert und der Effekt wird glatter.

Parameter

speedString,Number

Eine Zeichenfolge mit einer von drei vorgegebenen Geschwindigkeiten („langsam“, „normal“ oder „schnell“) oder ein Millisekundenwert, der die Animationsdauer darstellt (z. B. 1000)

Rückruf (optional)Funktion Funktion wird ausgeführt, wenn die Animation abgeschlossen ist

Beispiel

Beschreibung:

Schieben Sie den Absatz 600 Millisekunden lang langsam nach oben oder unten

jQuery-Code:

$("p").slideToggle("slow");

Nach dem Login kopieren

Beschreibung:

Verwenden Sie 200 Millisekunden, um den Absatz schnell nach oben oder unten zu verschieben. Anschließend wird ein Dialogfeld angezeigt

jQuery-Code:

$("p").slideToggle("fast",function(){ 
 alert("Animation Done."); 
});

Nach dem Login kopieren

Der obige Inhalt ist der JQuery-Code zum Implementieren von Gleiteffekten. Ich hoffe, er gefällt Ihnen.