您的位置：首页 > Web前端 > JQuery

jQuery笔记——动画设计——滑动动画

2016-11-08 17:18 162 查看

一、显隐滑动效果

向下滑动：slideDown

slideDown([duration] , [callback])

slideDown([duration] , [easing] , [callback])

向上滑动：slideUp

slideUp([duration] , [callback])

slideUp([duration] , [easing] , [callback])

参数解释：

duration：一个字符串或数字，用来定义动画将运行多久

easing：一个用来表示使用哪个缓冲函数来过渡的字符串

callback：动画完成时执行的函数

slideDown和slideUp：

通过改变高度的值来实现；高度为0时，display将会被设为none，以确保该元素不会影响页面布局。

持续时间以毫秒为单位，数值越大，动画越慢；fast ：200ms ，slow：600；如果提供任何其他字符串，或者这个duration参数被忽略，默认使用400ms。

这个回调函数不设置任何参数，但是this是存在动画的DOM元素，如果多个元素一起做动画效果，每执行一次回调匹配的元素，而不是作为一个整体动画的一次。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>显隐滑动效果</title>
<script src="js/jquery2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$(this).parent().slideUp("slow",function(){
$("#msg").text($("button",this).text() + "已经实现。");
});
});
});
</script>
</head>
<body>
<div>
<button>隐藏文本框1</button>
<input type="text" value="文本框1"/>
</div>
<div>
<button>隐藏文本框2</button>
<input type="text" value="文本框2"/>
</div>
<div>
<button>隐藏文本框3</button>
<input type="text" value="文本框3"/>
</div>
<div id="msg"></div>
</body>
</html>

注意：slideDown（）作用于隐藏元素

slideUp（）作用于显示元素

二、显隐切换滑动

在滑动中切换显示或隐藏元素：slideToggle()

slideToggle([duration] , [callback])

slideToggle([duration] , [easing] , [callback])

参数解释：

duration：一个字符串或数字，用来定义动画将运行多久

easing：一个用来表示使用哪个缓冲函数来过渡的字符串

callback：动画完成时执行的函数

slideToggle：

通过改变高度的值来实现；高度为0时，display将会被设为none，以确保该元素不会影响页面布局。display属性将会被存储并且需要的时候可以恢复。

持续时间以毫秒为单位，数值越大，动画越慢；fast ：200ms ，slow：600；

这个回调函数不设置任何参数，但是this是存在动画的DOM元素，如果多个元素一起做动画效果，每执行一次回调匹配的元素，而不是作为一个整体动画的一次。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>显隐切换滑动</title>
<script src="js/jquery2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#aa").click(function(){
$("div:not(.still)").slideToggle("slow",function(){
var n = parseInt($("span").text(),10);                     //将span中的数用十进制来解析
$("span").text(n+1);                                       //每调用一次就执行依次n+1，注意并不是整体动作完成一次加一。而是单个DOM对象切换一次就加一
})
}) ;
});
</script>
<style type="text/css">
div{background: #b977d1;margin: 3px;width: 60px;height: 60px;float: left;}
div still{background: #345;width: 5px;}
div.hider{display: none;}
span{color: red;}
p{clear: left;}
</style>
</head>
<body>
<div></div>
<div class="still"></div>
<div style="display: none;"></div>
<div class="still"></div>
<div></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div></div>
<p>
<button id="aa">滑动切换</button>
共计滑动切换<span>0</span>个div元素。
</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航