jQuery怎么实现左右滑动的toggle

时间2024-01-23 09:24:05发布访客分类HTML浏览399

导读：收集整理的这篇文章主要介绍了jQuery怎么实现左右滑动的toggle，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来jquery怎么实现左右滑动的toggle，jQuery实现左右滑动toggle的注意事项有哪些，下面就是...

收集整理的这篇文章主要介绍了jQuery怎么实现左右滑动的toggle，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来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>

效果如下：

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！