jQuery_效果(滑动)

jQuery 滑动方法


jQuery 拥有以下滑动方法:slideDown()、slideUp()、slideToggle()

1、jQuery slideDown() 方法(用于向下滑动元素)


语法:$(selector).slideDown(speed,callback);


可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".filp").click(function(){
$(".panel").slideDown("fast");
});
});
</script>
<style type="text/css">
body,div,p{ padding:0; margin:0 auto;}
div.panel,p.filp{ text-align:center; background:red; height:100px; padding-top:20px;}
div.panel{ height:120px; display:none;}
p.filp{ height:30px;}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="filp">请点击这里</p>
</body>

2、jQuery slideUp() 方法(用于向上滑动元素)


语法:$(selector).slideUp(speed,callback);


可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".filp").click(function(){
$(".panel").slideUp("fast");
});
});
</script>
<style type="text/css">
body,div,p{ padding:0; margin:0 auto;}
div.panel,p.filp{ text-align:center; background:red; height:100px; padding-top:20px;}
div.panel{ height:120px;}
p.filp{ height:30px;}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="filp">请点击这里</p>
</body>

3、jQuery slideToggle() 方法


jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动,则 slideToggle() 可向上滑动它们。

如果元素向上滑动,则 slideToggle() 可向下滑动它们。

语法:$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".filp").click(function(){
$(".panel").slideToggle("fast");
});
});
</script>
<style type="text/css">
body,div,p{ padding:0; margin:0 auto;}
div.panel,p.filp{ text-align:center; background:red; height:100px; padding-top:20px;}
div.panel{ height:120px; display:none;}
p.filp{ height:30px;}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="filp">请点击这里</p>
</body>

jQuery_效果(滑动),布布扣,bubuko.com

时间: 06-28

jQuery_效果(滑动)的相关文章

ecshop搜索出现相关商品的效果滑动下拉效果

ecshop搜索栏效果如下 所需要的样式我们可以复制到style.css里: /*搜索滑动效果*/ .Menu { position:absolute; top:30px; left:7px; width:150px; height:auto; z-index:1; background:#FFF; border:1px solid #000; display:none; } .Menu2 { position: absolute; left:0; top:0; width:100%; heig

jQuery 效果 - 滑动

jQuery 滑动方法可使元素上下滑动. 实例 jQuery slideDown() 演示 jQuery slideDown() 方法. jQuery slideUp() 演示 jQuery slideUp() 方法. jQuery slideToggle() 演示 jQuery slideToggle() 方法. jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() slideUp() slideToggle() j

iOS-实现映客首页TabBar和滑动隐藏NavBar和TabBar

之前在做直播的时候,参照了映客App,发现其首页的效果还挺不错,在网上找了一下相关仿映客App代码和博客,大部分都是说如何播放直播流和推流,对于UI这块甚少,所以我自己花了点时间研究了一下映客的首页UI效果. 转载自 SUN'S BLOG - 专注互联网知识,分享互联网精神! . 映客首页主要分两部分,一部分是实现没有文字而且中间按钮突出的TabBar,另一部分是显示滑动ScrollView隐藏和显示NavBar和TabBar.我们来慢慢看. 一.TabBar实现 首先,我们看下实现后的效果.

jQuery整理2

七.jQuery效果 (1)jQuery隐藏和显示 //隐藏 $("#hide").click(function(){ $("p").hide(1000); }); //显示 $("#show").click(function(){ $("p").show(1000); }); //隐藏/显示 $("#toggle").click(function(){ $("p").toggle(10

iOS 自动循环播放广告控件实现

1.原理:图片:图片集合名称保存成array: 轮播:为了实现滑动效果,至少需要三个imageview,为了确保左右滑动,需要一直显示中间的view 每次滑动后都需要重新加载三个view的图片.并设置当前图片下标 2.接口:提供给viewcontroller一个判断左右滑动的接口,并实现滑动效果 提供给pagecontroller一个设置页面的接口,根据下标设置当前现实页 3.代码:ADScrollView,附详细注释 .h @interface ADScrollView : UIScrollV

jQuery特效(二)

一.jQuery效果-滑动  <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.10.1.min.js"></script> <script src="move.js"></script> <

实现ViewPager多页面滑动效果

 viewPager实现引导页 ViewPager多页面滑动效果 1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右 切换tab页. 2.自android 3.0之后的SDK中提供了android-support-V4包用以实现 版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一 个可以实现左右滑动的类ViewPager 今天我们就用ViewPager类来实现引导页的实战案例 实现功能: 1.实现ViewPager多页面滑动效果. 2.下方的显示当前焦点页

android UI之ViewPager多页面滑动效果

  viewPager实现引导页 ViewPager多页面滑动效果 1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右 切换tab页. 2.自android 3.0之后的SDK中提供了android-support-V4包用以实现 版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一 个可以实现左右滑动的类ViewPager 今天我们就用ViewPager类来实现引导页的实战案例 实现功能: 1.实现ViewPager多页面滑动效果. 2.下方的显示当前

【javascript/css】Javascript+Css实现图片滑动浏览效果

今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <script type="text/javascrip