首頁  >  文章  >  web前端  >  jQuery怎麼實現左右滑動的toggle

jQuery怎麼實現左右滑動的toggle

php中世界最好的语言
php中世界最好的语言原創
2018-03-27 16:41:153653瀏覽

這次帶給大家jQuery怎麼實現左右滑動的toggle,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(){
   $('#toggle').click(function(){
    $('.left').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(){
   $('#toggle').click(function(){
    $('.left').animate({width:'toggle'},350);
   });
  });
 </script>
</body>
</html>

效果如下:

##相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

AjaxUpLoad.js怎麼實作檔案上傳

操作Vue渲染與外掛程式載入的順序

以上是jQuery怎麼實現左右滑動的toggle的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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