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> slide.js-Code:
/*滑动效果*/
$(document).ready(function(){
//向上滑入
$('#btn1').click(function(){
$('img').slideUp(2000);
});
//向下滑出
$('#btn2').click(function(){
$('img').slideDown(2000);
});
//切换滑动
$('#btn3').click(function(){
$('img').slideToggle(2000);
});
}) 
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.
speedString,Number
Rückruf (optional)FunktionFunktion
jQuery-Code:
$("p").slideDown("slow");
jQuery-Code:
$("p").slideDown("fast",function(){
alert("Animation Done.");
}); slideUp(speed, [callback])
Übersicht
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.
speedString,Number
Rückruf (optional)Funktion
jQuery-Code:
$("p").slideUp("slow");
jQuery-Code:
$("p").slideUp("fast",function(){
alert("Animation Done.");
}); slideToggle(speed, [callback])
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.
speedString,Number
Rückruf (optional)Funktion
Funktion wird ausgeführt, wenn die Animation abgeschlossen ist
jQuery-Code:
$("p").slideToggle("slow");
jQuery-Code:
$("p").slideToggle("fast",function(){
alert("Animation Done.");
});
