jQueryを使って左右スライドのトグルメソッドを実装するにはどうすればよいですか？-jsチュートリアル-php.cn

jQueryを使って左右スライドのトグルメソッドを実装するにはどうすればよいですか？

亚连

リリース： 2018-06-01 16:12:19

オリジナル

2077 人が閲覧しました

ここで、左右のスライドを実現するための jQuery の切り替えメソッドを共有します。これは優れた参考値なので、皆さんのお役に立てれば幸いです。

上下に移動するには jQuery が使用されることがわかっており、slideUp() メソッドと slideDown() メソッドを直接使用できます。

slideUp() メソッドと slideDown() メソッドは要素の高さのみを変更します。要素の表示属性値が「none」の場合、slideDown()メソッドを呼び出すと、要素は上から下に向かって表示されます。 slideUp() メソッドはその逆で、要素は上から下に短縮されて非表示になります。

コードは次のとおりです:

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

ログイン後にコピー

それでは、左右にスライドインおよびスライドアウトするのはどうですか?

デモは次のとおりです:

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

ログイン後にコピー

効果は次のとおりです: