|
? 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>
先要下载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>
|