diapositive jQuery

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

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

diapositive jQuery

É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]