jQuery滑动效果实现方法分析
更新时间：2018年09月05日 11:37:26 作者：furway
这篇文章主要介绍了jQuery滑动效果实现方法,结合实例形式分析了jQuery实现滑动效果常用的slideDown()、slideUp()及slideToggle()方法相关使用技巧,需要的朋友可以参考下
本文实例讲述了jQuery滑动效果实现方法。分享给大家供大家参考，具体如下：
jQuery 滑动方法：
1.slideDown()方法：用于向下滑动元素
语法：
$(selector).slideDown(speed,callback);
2.slideUp()方法：用于向上滑动元素
语法：
$(selector).slideUp(speed,callback);
3.slideToggle()方法：可以在slideDown()与slideUp()方法之间进行切换。
语法：
$(selector).slideToggle(speed,callback);
eg:
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<div class="panel">
<p>Hello world</p>
<p>Hello everyone,I am so cool</p>
</div>
<p class="flip">click</p>
</body>
</html>
运行结果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容还可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
这篇文章主要介绍了Jquery 实现table样式的设定方法的相关资料,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jquery与json的结合，分为三个阶段,设计htm页面,使用jQuery编写AJAX请求文件，感兴趣的小伙伴们可以参考一下2016-01-01
这里给大家分享的是使用jQuery实现列表内容的动态载入的特效，效果相当棒，后面附上瀑布流的实现思路和关键代码，有需要的小伙伴可以参考下。2015-08-08
JQuery获取和设置Select选项方法汇总如下，需要的朋友可以参考下2012-09-09
这篇文章主要为大家详细介绍了jQuery实现推拉门效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要为大家详细介绍了jquery单击文字或图片内容放大并居中显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要为大家详细介绍了jQuery Ajax实现用户名重名实时检测，针对用户注册时出现的用户名重名问题进行自动检测，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了jquery datepicker参数介绍和示例,需要的朋友可以参考下2014-04-04
jquery拆分姓名处理程序如下，纯js实现的，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-05-05
这篇文章主要介绍了ajax的分页查询示例（不刷新页面），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
最新评论