jQuery怎么实现左右滑动的toggle

互联网 18-3-27

这次给大家带来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中文网其它相关文章！

jQuery怎么实现左右滑动的toggle

相关资讯

标签推荐