jQuery学习第六课(jquery中的动画)

iteye_8029

于 2014-04-09 16:36:00 发布

阅读量56

点赞数

文章标签： xhtml javascript ViewUI

1.基础动画

2.渐变动画

3.滑动动画

4.自定义动画

5.动画队列

• jquery中的基础动画(略，见前面的课)

a. show()显示

b. hide()隐藏

c. toggle()切换show/hide

• jquery中的渐变动画

a. fadeIn()

b. fadeOut()

c. fadeTo()

d. fadeToggle()切换fadeIn/fadeOut

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo6</title>
<script src="jquery.js"></script>
<style>
p{
width: 300px;
padding: 10px;
border: 1px solid #abcdef;
/*display: none;*/
}
</style>
</head>
<body>
<a href="###">点击</a>
<p>Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。</p>

<script>
/*$('a').click(function(){
//透明度opacity从0变成1
$('p').fadeIn(1000);
});*/

/*$('a').click(function(){
//透明度opacity从1变成0
$('p').fadeOut(1000);
})*/

/*$('a').click(function(){
$('p').fadeTo(1000,.3,function(){
alert('fadeTo方法执行完成');
});
});*/

$('a').click(function(){
$('p').fadeToggle(500);
});
</script>
</body>
</html>

• jquery中的滑动动画

a. slideDown()

b. slideUp()

c. slideToggle()

<script>
/*$('a').click(function(){
$('p').slideDown(500);//向下滑动显示隐藏的元素
});*/

/*$('a').click(function(){
$('p').slideUp(500););//与slideDown相反，向上收起隐藏显示的元素
});*/

$('a').click(function(){
$('p').slideToggle(500);//切换slideDown/slideUp
});
</script>

• animate自定义动画

• jquery中的动画队列

stop()

dequeue()

finish()

delay()

jQuery.fx.interval()，设置运动的时间，不推荐

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo9</title>
<script src="jquery.js"></script>
<style>
p{
width: 300px;
height: 300px;
background: #abcdef;
display: none;
}
</style>
</head>
<body>
<a href="###">aaaaaa</a>
<p>bbbbbbbbb</p>

<script>
$('a').hover(function(){
$('p').stop(false,true).slideDown(500);
},function(){
$('p').stop(false,true).slideUp(500);
});
</script>
</body>
</html>

---------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo10</title>
<style>
div{
width: 50px;
height: 50px;
background: #f60;
position: absolute;
left: 10px;
top: 40px;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<button>RUN</button>
<input id="stop" type="button" value="stop" />
<input id="dequeue" type="button" value="dequeue" />
<input id="finish" type="button" value="finish" />
<div></div>

<script>
$('button').click(function(){
$('div').animate({
'top':'400px'
},2000).animate({
'left':'800px'
},2000).animate({
'top':'40px'
},2000).animate({
'left':'10px'
},2000);
});

$('#stop').click(function(){
$('div').stop(false,true);
});

$('#dequeue').click(function(){
$('div').dequeue();
});

$('#finish').click(function(){
$('div').finish();
});
</script>
</body>
</html>

• jquery动画算法插件

先要下载easing插件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo12</title>
<script src="jquery.js"></script>
<script src="easing.js"></script>
<style>
div{
width: 50px;
height: 50px;
position: absolute;
left: 10px;
top: 40px;
background: #abcdef;
}
</style>
</head>
<body>
<input type="button" value="点击" />
<div></div>

<script>
$('input').click(function(){
$('div').animate({'left':'800px'},2000,'easeOutBounce');
});
</script>
</body>
</html>

//jquery中函数的参数有‘easing’这一项，即可用easing插件中的方法，

表示元素在动画中的过渡时使用的缓动函数。

<body>
<input type="button" value="点击" />
<div></div>

<script>
$('input').click(function(){
$('div').animate({'left':'-=100px'},2000);
});
</script>
</body>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。