首頁  >  文章  >  web前端  >  利用jQuery如何實現左右滑動的toggle方法?

利用jQuery如何實現左右滑動的toggle方法?

亚连
亚连原創
2018-06-01 16:12:192025瀏覽

下面我就為大家分享一篇jQuery實現左右滑動的toggle方法,具有很好的參考價值,希望對大家有所幫助。

我們知道使用 jQuery 來實作上下移入移除,可以直接使用 slideUp() 和 slideDown() 方法。

slideUp()方法和slideDown()方法只會改變元素的高度。如果一個元素的 display 屬性值為 “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>

那麼,要實現左右的滑入滑出呢?

demo 如下:

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

效果如下:

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

vue.js專案nginx部署教學

#mint-ui在vue中的使用範例

透過JS 判斷頁面是否有捲軸的實作方法

以上是利用jQuery如何實現左右滑動的toggle方法?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn