jQuery怎么实现左右滑动的toggle


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来jQuery怎么实现左右滑动的toggle,jQuery实现左右滑动toggle的注意事项有哪些,下面就是实战案例,一起来看一下。

我们知道使用 jQuery 来实现上下移入移除,可以直接使用 slideUp() 和 slideDown() 方法。

slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的 display 属性值为 “none”,当调用 slideDown() 方法时,这个元素将由上至下延伸显示。slideUp()方法正好相反,元素将由上到下缩短隐藏。

代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!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 如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!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的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

jQuery日期控件怎么用

jQuery怎么安装

jQuery 数组判断值是否存在的方法

jQuery checkbox不可选怎么实现

有哪些常用的jQuery ui框架

jQuery如何设置元素不可见

jQuery和javascript的区别有哪些

jQuery让select不选中怎么实现

jQuery如何判断对象是否存在

jQuery如何判断数组包含指定元素

更多相关阅读请进入《jQuery》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...