Comment implémenter la méthode bascule de glissement gauche et droite à l'aide de jQuery ?-js tutoriel-php.cn

Comment implémenter la méthode bascule de glissement gauche et droite à l'aide de jQuery ?

亚连

Libérer： 2018-06-01 16:12:19

original

2021 Les gens l'ont consulté

Maintenant, je vais partager avec vous une méthode de bascule jQuery pour réaliser un glissement vers la gauche et la droite. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Nous savons que jQuery est utilisé pour monter et descendre, et vous pouvez directement utiliser les méthodes slideUp() et slideDown().

Les méthodes slideUp() et slideDown() modifieront uniquement la hauteur de l'élément. Si la valeur de l'attribut d'affichage d'un élément est "aucun", lorsque la méthode slideDown() est appelée, l'élément sera affiché de haut en bas. La méthode slideUp() est tout le contraire. L'élément sera raccourci et masqué de haut en bas.

Le code est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>toggle-jquery1.9</title>
 <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
 <style>
  p.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  p.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>
</head>
<body>
 <p class="container">
  <p class="left"></p>
 </p>
 <button id="toggle">toggle</button>
 <script>
  $(document).ready(function(){
   $(&#39;#toggle&#39;).click(function(){
    $(&#39;.left&#39;).slideToggle(300);
   });
  });
 </script>
</body>
</html>

Copier après la connexion

Alors, qu'en est-il de glisser vers l'intérieur et vers l'extérieur à gauche et à droite ?

La démo est la suivante :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>toggle-jquery1.9</title>
 <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
 <style>
  p.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  p.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>
</head>
<body>
 <p class="container">
  <p class="left"></p>
 </p>
 <button id="toggle">toggle</button>
 <script>
  $(document).ready(function(){
   $(&#39;#toggle&#39;).click(function(){
    $(&#39;.left&#39;).animate({width:&#39;toggle&#39;},350);
   });
  });
 </script>
</body>
</html>

Copier après la connexion

L'effet est la suivante :