La méthode coulissante jQuery peut faire glisser les éléments de haut en bas.
Méthodes de glissement jQuery
Avec jQuery, vous pouvez créer des effets de glissement sur des éléments.
jQuery a les méthodes de glissement suivantes :
slideDown()
slideUp()
slideToggle()
Méthode jQuery slideDown()
jQuery La méthode slideDown () est utilisée pour faire glisser l'élément vers le bas.
Syntaxe :
$(selector).slideDown(speed,callback);
Le paramètre optionnel speed spécifie la durée de l’effet. Il peut prendre les valeurs suivantes : "lent", "rapide" ou millisecondes.
Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois le glissement terminé.
L'exemple suivant illustre la méthode slideDown() :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideDown("slow");
});
});
</script>
<style type="text/css">
#div2,#div1
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#div2
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="div1">点我滑下面板</div>
<div id="div2">你好啊，美女/帅哥</div>
</body>
</html>Exécutez-la et essayez-la
Méthode jQuery slideUp()
La méthode jQuery slideUp() est utilisée pour faire glisser un élément vers le haut.
Syntaxe :
$(sélecteur).slideUp(speed,callback);
Le paramètre optionnel speed spécifie la durée de l’effet. Il peut prendre les valeurs suivantes : "lent", "rapide" ou millisecondes.
Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois le glissement terminé.
L'exemple suivant illustre la méthode slideUp() :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideUp("slow");
});
});
</script>
<style type="text/css">
#div2,#div1
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#div2
{
padding:50px;
}
</style>
</head>
<body>
<div id="div1">点我拉起面板</div>
<div id="div2">Hello world!</div>
</body>
</html>Exécutez-la et essayez-la
Méthode jQuery slideToggle()
La méthode jQuery slideToggle() peut basculer entre les méthodes slideDown() et slideUp().
Si des éléments glissent vers le bas, slideToggle() les fait glisser vers le haut.
Si des éléments glissent vers le haut, slideToggle() les fait glisser vers le bas.
Syntaxe
$(selector).slideToggle(speed,callback);
Oui Le paramètre de vitesse sélectionné précise la durée de l'effet. Il peut prendre les valeurs suivantes : "lent", "rapide" ou millisecondes.
Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois le glissement terminé.
L'exemple suivant illustre la méthode slideToggle() :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideToggle("slow");
});
});
</script>
<style type="text/css">
#div2,#div1
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#div2
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="div1">点我，显示或隐藏面板。</div>
<div id="div2">如果只是相遇，而不能相守，人生最好不相见</div>
</body>
</html>Exécutez-la et essayez-la
section suivante