diapositive jQuery
Effet jQuery - Glissement
La méthode de glissement jQuery peut faire glisser les éléments de haut en bas.
Le temps vaut de l'argent, nous vous proposons donc un contenu d'apprentissage rapide et facile à comprendre.
Ici, vous pouvez acquérir toutes les connaissances dont vous avez besoin grâce à un mode facile à comprendre et pratique.
Exemple
jQuery slideDown()
Démontre la méthode jQuery slideDown().
jQuery slideUp()
Démontre la méthode jQuery slideUp().
jQuery slideToggle()
Démontre la méthode jQuery slideToggle().
Méthodes de glissement jQuery
Avec jQuery, vous pouvez créer des effets de glissement sur les éléments.
jQuery a les méthodes de glissement suivantes :
- slideDown()
- slideUp()
- slideToggle()
Méthode jQuery slideDown()
La méthode jQuery slideDown() est utilisée pour faire glisser des éléments vers le bas.
Syntaxe :
Le paramètre optionnel de vitesse 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 slideDown() :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'exemple" pour afficher l'exemple en ligne
Méthode jQuery slideUp()
La méthode jQuery slideUp() est utilisée pour faire glisser les éléments vers le haut.
Syntaxe :
Le paramètre optionnel de vitesse 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 slideUp() :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">点我拉起面板</div>
<div id="panel">Hello world!</div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'exemple" pour afficher l'exemple en ligne
Méthode jQuery slideToggle()
La méthode jQuery slideToggle() peut être entre slideDown() et slideUp () méthodes Faites le changement.
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.
Le paramètre optionnel de vitesse 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() :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
