jQuery如何实现左右滑动切换方法

　　介绍

这篇文章给大家分享的是有关jQuery如何实现左右滑动切换方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

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

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

<强>代码如下:

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,& lt; meta  charset=癠TF-8"比; 　　,& lt; title> toggle-jquery1.9 　　,& lt; https://www.yisu.com/zixun/script  src=" https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js "> 　　<时尚> 　　div.container { 　　身高:320 px; 　　边界:1 px固体# ccc; 　　} 　　div.left { 　　宽度:200 px; 　　身高:300 px; 　　background - color: # 36 f; 　　}> 头 　　<身体> 　　
　　
　　
　　<按钮id="开关"> 按钮切换 　　<>脚本 　　$(文档)时函数(){ 　　$(" #开关”).click(函数(){ 　　$ (' .left ') .slideToggle (300); 　　}); 　　});> 　　

jQuery如何实现左右滑动切换方法

<强>那么,要实现左右的滑入滑出呢?

<强>演示如下:

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,& lt; meta  charset=癠TF-8"比; 　　,& lt; title> toggle-jquery1.9 　　,& lt; https://www.yisu.com/zixun/script  src=" https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js "> 　　<时尚> 　　div.container { 　　身高:320 px; 　　边界:1 px固体# ccc; 　　} 　　div.left { 　　宽度:200 px; 　　身高:300 px; 　　background - color: # 36 f; 　　}> 头 　　<身体> 　　
　　
　　
　　<按钮id="开关"> 按钮切换 　　<>脚本 　　$(文档)时函数(){ 　　$(" #开关”).click(函数(){ 　　$ (' .left ') .animate({宽度:“切换”},350); 　　}); 　　});> 　　

<>强效果如下:

jQuery如何实现左右滑动切换方法

jQuery是什么

jQuery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对css选择器进行扩展,拥有便捷的插件扩展机制和丰富的插件,是继原型之后又一个优秀的JavaScript代码库,能够用于简化事件处理,html文档遍历,Ajax交互和动画,以便快速开发网站。

感谢各位的阅读!关于“jQuery如何实现左右滑动切换方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

jQuery如何实现左右滑动切换方法