注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧互联

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

jQuery简介(4)动画  

2014-05-25 18:35:13|  分类: jq |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
目标:
1.熟悉jq常见效果:基本效果、滑动效果、淡入淡出;
2.掌握自定义效果的实现方法;


基本
show([s,[e],[fn]]) 
hide([s,[e],[fn]]) 
toggle([s],[e],[fn]) 

滑动
slideDown([s],[e],[fn]) 
slideUp([s,[e],[fn]]) 
slideToggle([s],[e],[fn]) 

淡入淡出
fadeIn([s],[e],[fn]) 
fadeOut([s],[e],[fn]) 
fadeTo([[s],o,[e],[fn]]) 
fadeToggle([s,[e],[fn]]) 

基本动画演示:

<!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">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title here</title>
<script src="http://127.0.0.1/js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('li:even').addClass('even');//偶数行加样式

/*基本动画
$('button:eq(0)').click(function(){
$('ul').show('fast');//可选参数
});
$('button:eq(1)').click(function(){
$('ul').hide(3000);//可选参数
});
$('button:eq(2)').click(function(){
$('ul').toggle('slow');//可选参数
});
*/

/*滑动
$('button:eq(0)').click(function(){
$('ul').slideDown('fast');//可选参数
});
$('button:eq(1)').click(function(){
$('ul').slideUp(3000);//可选参数
});
$('button:eq(2)').click(function(){
$('ul').slideToggle('slow');//可选参数
});*/

/*淡入淡出*/
$('button:eq(0)').click(function(){
$('ul').fadeIn('fast');//可选参数
});
$('button:eq(1)').click(function(){
$('ul').fadeOut(3000);//可选参数
});
$('button:eq(2)').click(function(){
$('ul').fadeToggle('slow');//可选参数
});

$('button:eq(3)').click(function(){
$('ul').fadeTo('slow', 0.3);//可选参数时间,透明度
});

/*
基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
*/




});
</script>
<style>
ul{margin:0; padding:0; list-style:none; width:160px;
border:1px solid #4b4b4b'; background:#c0c0c0;}
li{
margin:0; padding:5px 0 5px 20px;
border-bottom:1px solid #4b4b4b;
font-size:15px;
font-weight:bold;
}
a{ color:#fff; text-decoration:none;
padding-right:50px; white-space:nowrap;}
a:hover{color:#000;}
.even{background:#0096ff;}
</style>
</head>

<body>
<h1>请用chrome打开审查元素(F12快捷键)功能观察效果</h1>

<button>show</button>
<button>hide</button>
<button>toggle</button>

<button>fadeTo</button>

<ul>
<li><a href='#'>html</a></li>
<li><a href='#'>css</a></li>
<li><a href='#'>js</a></li>
<li><a href='#'>jq</a></li>
</ul>

</body>
</html>



自定义
animate(p,[s],[e],[fn])1.8* 
stop([c],[j])1.7* 
delay(d,[q]) 
设置
jQuery.fx.off 
jQuery.fx.interval 



一.使用jq方法实现动画的3个关键点:
1.动画完成,最后的效果怎样?
2.采用什么样的方式,来完成这个效果?
先快后慢?一会快一会慢?
3.采用什么速度完成?

二、animate()方法对应的这三个关键点:
1.结果样式属性:
动画最终完成的效果。通常需要设置css样式;
需要注意的是,在animate()方法中,css样式属性名,需要采用
驼峰法来命名。也就是,遇到有css样式名词中间有横线的,需要去掉横线,其后单词首字母大写。例如:
margin-left => marginLeft
2.擦除效果(easing)
用于设置效果的执行如何运行。有专门的擦除效果插件,提供各种
经过数学运算的运行轨迹。
3.速度:
1)字符串:slow 600, normal 400, fast 200;
2)毫秒数:

三、animate()方法接收的参数形式:
1.params,[speed],[easing],[fn]
2.params, options
1)params:一组包含作为动画属性和终值的样式属性和其值的集合;
2)options:动画的额外选项。如
speed:设置动画速度;
easing:规定要使用的easing函数,
callback:规定动画完成之后要执行的函数;
step: 规定动画的每一步完成之后要执行的函数;
queue:布尔值。指示是否在效果队列中放置动画。
如果为false,则动画立即执行;
specialEasing:来自styles参数的一个或多个css属性的映射,
以及他们对应easing函数;


效果图:
jQuery简介(4)动画 - 湖小叶叶 - 米欧光影工作室
 
自定义动画演示:

<!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">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title here</title>
<script src="http://127.0.0.1/js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('li:even').addClass('even');//偶数行加样式

$('a').mouseover(function(){
$(this).animate(
{paddingLeft:'20px'},
{queue:false}
);

}).mouseout(function(){
$(this).animate(
{paddingLeft:'0'},
{queue:true}
);

});



/*--------------自定义动画---------------------
一.使用jq方法实现动画的3个关键点:
1.动画完成,最后的效果怎样?
2.采用什么样的方式,来完成这个效果?
先快后慢?一会快一会慢?
3.采用什么速度完成?
二、animate()方法对应的这三个关键点:
1.结果样式属性:
动画最终完成的效果。通常需要设置css样式;
需要注意的是,在animate()方法中,css样式属性名,需要采用
驼峰法来命名。也就是,遇到有css样式名词中间有横线的,需要去掉横线,其后单词首字母大写。例如:
margin-left => marginLeft
2.擦除效果(easing)
用于设置效果的执行如何运行。有专门的擦除效果插件,提供各种
经过数学运算的运行轨迹。
3.速度:
1)字符串:slow 600, normal 400, fast 200;
2)毫秒数:
三、animate()方法接收的参数形式:
1.params,[speed],[easing],[fn]
2.params, options
1)params:一组包含作为动画属性和终值的样式属性和其值的集合;
2)options:动画的额外选项。如
speed:设置动画速度;
easing:规定要使用的easing函数,
callback:规定动画完成之后要执行的函数;
step: 规定动画的每一步完成之后要执行的函数;
queue:布尔值。指示是否在效果队列中放置动画。
如果为false,则动画立即执行;
specialEasing:来自styles参数的一个或多个css属性的映射,
以及他们对应easing函数;

*/



/*
自定义
animate(p,[s],[e],[fn])1.8* 自定义动画
stop([c],[j])1.7* 暂停
delay(d,[q]) 延时
设置
jQuery.fx.off
jQuery.fx.interval
*/


});
</script>
<style>
ul{margin:0; padding:0; list-style:none; width:160px;
border:1px solid #4b4b4b'; background:#c0c0c0;}
li{
margin:0; padding:5px 0 5px 20px;
border-bottom:1px solid #4b4b4b;
font-size:15px;
font-weight:bold;
}
a{ color:#fff; text-decoration:none; display:block;
padding-right:50px; white-space:nowrap;}
a:hover{color:#000;}
.even{background:#0096ff;}
</style>
</head>

<body>
<h1>请用chrome打开审查元素(F12快捷键)功能观察效果</h1>

<button>slideToggle</button>
<button>stop</button>
<button>delay</button>

<button>fadeTo</button>

<ul>
<li><a href='#'>html</a></li>
<li><a href='#'>css</a></li>
<li><a href='#'>js</a></li>
<li><a href='#'>jq</a></li>
</ul>

</body>
</html>


---------------
  评论这张
 
阅读(107)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018