Effet jQuery - Diapositive

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()

La méthode jQuery slideDown() est utilisée pour faire glisser des éléments vers le bas.

Syntaxe :

$(selector).slideDown(speed,callback);

Le paramètre facultatif de vitesse 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é.

<!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(){
  $("#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>

Méthode jQuery slideUp()

La méthode jQuery slideUp() est utilisée pour faire glisser les éléments vers le haut.

Syntaxe :

$(selector).slideUp(speed,callback);

Le paramètre facultatif de vitesse 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é.

<!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(){
  $("#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>

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.

$(selector).slideToggle(speed,callback);

Le paramètre facultatif de vitesse 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é.

<!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(){
  $("#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>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $().ready(function () { $("#bta").click(function () { $("#unit").stop(true, false).animate({"left": 0}, 500); }); $("#btb").click(function () { $("#unit").stop(true, false).animate({"left": -300}, 500); }) }); </script> <style type="text/css"> * { padding: 0; margin: 0;} #box {width: 300px; height: 150px; margin-bottom: 50px; position: relative; overflow: hidden; } #unit { width: 600px; position: absolute; } #unit div {float: left; width: 300px; height: 150px;} #bga {background-color: #F30;} #bgb {background-color: #F90;} #bta, #btb { float: left; width: 50px; padding-right: 50px; color: #FFF; cursor: pointer;} </style> </head> <body> <div style="width:800px; height:300px; padding-top:100px; background-color:#999; margin:0 auto;"> <div id="box"> <div id="unit"> <div id="bga">框一</div> <div id="bgb">框二</div> </div> </div> <div id="bta">左</div> <div id="btb">右</div> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Effet jQuery - Diapositive

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]