本文实例讲述了jQuery滑动效果实现方法。分享给大家供大家参考,具体如下:
<强> jQuery滑动方法:
1。<代码> slideDown() 方法:用于向下滑动元素
语法:
$(选择).slideDown(速度、回调);
之前
2。<代码> slideUp() 方法:用于向上滑动元素
语法:
$(选择).slideUp(速度、回调);
之前
3 <代码> slideToggle() 方法:可以在<代码> slideDown() 与<代码> slideUp() 方法之间进行切换。
语法:
$(选择).slideToggle(速度、回调);
之前
<强>,
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;脚本src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
$(文档)时函数(){
$ (" .flip ") .click(函数(){
$ (" .panel ") .slideToggle(“慢”);
});
});
& lt;/script>
& lt;风格类型=" text/css "比;
div.panel p.flip {
保证金:0 px;
填充:5 px;
text-align:中心;
背景:# e5eecc;
边界:固体1 px # c3c3c3;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=懊姘濉北?
& lt; p>你好world
& lt; p>,大家好,我是所以cool
& lt;/div>
类& lt; p=胺弊４莄lick
& lt;/body>
& lt;/html>
之前
运行结果:
感兴趣的朋友可以使用http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容还可查看本站专题:《jQuery切换特效与技巧总结》,《jQuery扩展技巧总结》,《jQuery常用插件及用法总结》,《jQuery拖拽特效与技巧总结》,《jQuery表格(表)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jQuery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
