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

jQuery之动画

2015-12-16 16:04 639 查看

jQuery之动画

1.show()/hide()

a,通过同时改变元素高度和宽度来实现显示和隐藏。

b,用法：

show(速度[,回调函数]);

速度：'show'/'normal'/'fast'/毫秒数

回调函数：整个动画执行完毕之后，会执行该函数。

2.slideUp()/slideDown()

a,作用：通过同时改变元素高度来实现显示或隐藏。

b,用法同上

3.fadeIn()/fadeOut()

a,作用：通过改变元素的不透明度来实现显示和隐藏。

fadeIn():淡入 fadeOut():淡出

b,用法同上

示例代码:/jQuery01/WebRoot/animate/a1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>动画</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
//$('#d1').show('slow');

//$('#d1').slideDown();

$('#d1').fadeIn();
});
});
</script>
</head>
<body>
<a href="javascript:;">显示所有票价</a>
<div id="d1" style="display:none;">
111<br/>
222<br/>
333<br/>
444<br/>
</div>
</body>
</html>

4.自定义动画

animate(params,speed,[callback])

用法：

param:是一个javascrip对象，描述动画执行结束之后元素的样式，比如：

{'height','200px'}

speed:速度，单位毫秒

示例代码：/jQuery01/WebRoot/animate/a2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>自定义动画  animate</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<style type="text/css">
#d1{
width:100px;
height:100px;
background-color:red;
left:20px;
top:10px;
position:absolute;
}
</style>
<script type="text/javascript">
$(function(){
$('#d1').click(function(){
//$(this).animate({'left':'500px','top':'250px'},5000);

//动画队列
$(this).animate({'left':'500px'},5000);
$(this).animate({'top':'250px'},300).fadeOut();
});
});
</script>
</head>
<body>
<div id="d1">

</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航