自定义动画
使用animate()方法
animate(params,[duration],[easing],[callback])
其中params为希望进行变换的CSS属性列表,以及希望变化到的最终值;
需要特别指出,params中的变量遵循camel(驼峰式)命名方式,例如：paddingLeft不能写成padding_left
params只能是CSS中用数值表示的属性,例如width、top、opacity等，像backgroundColor这样的属性不被animate()支持;
属性值必须加引号,例如：width: &#;%&#;,用逗号隔开
duration为持续的时间,三种预定速度之一的字符串(&#;slow&#;,&#;normal&#;, or &#;fast&#;)或表示动画时长的毫秒数值(如：)
fast: 快速的
easing为可选参数,通常供动画插件使用,用来控制变化工程的节奏,jQuery中只提供了linear和swing两个值
jQuery 代码:
点击按钮后div元素的几个不同属性一同变化
// 在一个动画中同时应用三种类型的效果
$(&#;#go&#;).click(function(){
$(&#;#block&#;).animate({
width:&#;%&#;,
height:&#;%&#;,
fontSize:&#;10em&#;,
borderWidth:&#;10px&#;
}, );
});HTML 代码:
<button id=&#;go&#;> Run</button>
<div id=&#;block&#;>Hello!</div>相对变化的自定义动画
在params的CSS属性列表中,jQuery还允许使用&#;+=&#;或者&#;-=&#;来表示相对变化(多次变化)
<html>
<head>
<title>animate()方法</title>
<style type=&#;text/css&#;>
<!--
body{
background:url(bg2.jpg);
}
div{
position:absolute; /* 绝对定位 */
left:90px; top:50px;
}
input{
border:1px solid #;
}
-->
</style>
<script language=&#;javascript&#; src=&#;jquery.min.js&#;></script>
<script language=&#;javascript&#;>
$(function(){
$(&#;input:first&#;).click(function(){
$(&#;#block&#;).animate({
left: &#;-=80px&#; //相对左移
},);
});
$(&#;input:last&#;).click(function(){
$(&#;#block&#;).animate({
left: &#;+=80px&#; //相对右移
},);
});
});
</script>
</head>
<body>
<input type=&#;button&#; value=&#;<<左&#;> <input type=&#;button&#; value=&#;右>>&#;>
<div id=&#;block&#;><img src=&#;.jpg&#;></div>
</body>
</html>让指定元素左右移动
jQuery 代码:
$(&#;#right&#;).click(function(){
$(&#;.block&#;).animate({left: &#;+50px&#;}, &#;slow&#;); //+50px只能移动一次
});
$(&#;#left&#;).click(function(){
$(&#;.block&#;).animate({left: &#;-50px&#;}, &#;slow&#;); //-50px只能移动一次
});HTML 代码:
<button id=&#;left&#;><<</button> <button id=&#;right&#;>>></button>
<div class=&#;block&#;></div>另外在CSS属性列表params中,还可以将属性的最终值设置为&#;show&#;、&#;hide&#;、&#;toggle&#;
在毫秒内切换段落的高度和透明度
jQuery 代码:
$(&#;p&#;).animate({
height: &#;toggle&#;, opacity: &#;toggle&#;
}, &#;slow&#;);用毫秒将段落移到left为的地方并且完全清晰显示出来（透明度为1）
jQuery 代码:
$(&#;p&#;).animate({
left: , opacity: &#;show&#;
}, );一个使用&#;easein&#;函数提供不同动画样式的例子。只有使用了插件来提供这个&#;easein&#;函数，这个参数才起作用。
jQuery 代码:
$(&#;p&#;).animate({
opacity: &#;show&#;
}, &#;slow&#;, &#;easein&#;);animate()方法还有另外一种形式
animate(params,options)
其中params与第一种形式完全相同,options为动画的可选参数列表,主要包括duration、easing、callback、queue等。
其中duration、easing、callback与第1种形式完全一样，queue为布尔值，表示当有多个animate()组成jQuery链时,当前
animate()与紧接着的下一个animate()是按顺序执行(true,默认值),还是同时触发(false);
动画效果的触发程序
jQuery代码:
$(function(){
$(&#;input:eq(0)&#;).click(function(){
//第一个animate与第二个animate同时执行，然后再执行第三个
$(&#;#block1&#;).animate({width:&#;%&#;},{queue:false,duration:})
.animate({fontSize:&#;24px&#;},)
.animate({borderRightWidth:&#;20px&#;},);
});
$(&#;input:eq(1)&#;).click(function(){
//依次执行三个animate
$(&#;#block2&#;).animate({width:&#;%&#;},)
.animate({fontSize:&#;24px&#;}, )
.animate({borderRightWidth:&#;20px&#;}, );
});
$(&#;input:eq(2)&#;).click(function(){
$(&#;input:eq(0)&#;).click(); //触发单击事件,等同于$(&#;input:eq(0)&#;).trigger(&#;click&#;);
$(&#;input:eq(1)&#;).click(); //触发单击事件,等同于$(&#;input:eq(1)&#;).trigger(&#;click&#;);
});
$(&#;input:eq(3)&#;).click(function(){
//恢复默认设置
$(&#;div&#;).css({width:&#;&#;, fontSize:&#;&#;, borderWidth:&#;&#;});
});
});HTML代码:
<input type=&#;button&#; id=&#;go1&#; value=&#;Block1动画&#;>
<input type=&#;button&#; id=&#;go2&#; value=&#;Block2动画&#;>
<input type=&#;button&#; id=&#;go3&#; value=&#;同时动画&#;>
<input type=&#;button&#; id=&#;go4&#; value=&#;重置&#;>
<div id=&#;block1&#;>Block1</div>
<div id=&#;block2&#;>Block2</div>delay(duration,[queueName])
设置一个延时来推迟执行队列中之后的项目。
jQuery代码:
$(&#;button&#;).click(function(){
//$(&#;li&#;).animate(参与过渡的属性,时长,效果,回调函数);
$(&#;li&#;).delay).animate({
&#;width&#;: &#;500px&#;
});
})HTML代码:
<button>延迟执行</button>
<ul>
<li></li>
</ul>实例: delay特效
<!DOCTYPE html>
<html lang=&#;zh&#;>
<head>
<meta charset=&#;UTF-8&#; />
<meta name=&#;viewport&#; content=&#;width=device-width, initial-scale=&#; />
<meta http-equiv=&#;X-UA-Compatible&#; content=&#;ie=edge&#; />
<title>Document</title>
<style type=&#;text/css&#;>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid orange;
position: relative;
}
li{
width: 50px;
height: 50px;
background-image: url(&#;img/ym.jpg&#;);
background-repeat: no-repeat;
display: none;
position: absolute;
}
</style>
</head>
<body>
<button>┏ (゜ω゜)=</button>
<ul>
</ul>
<script src=&#;js/jquery-.js&#; type=&#;text/javascript&#; charset=&#;utf-8&#;></script>
<script src=&#;js/jquery-ui.js&#; type=&#;text/javascript&#; charset=&#;utf-8&#;></script>
<script type=&#;text/javascript&#;>
var str = &#;&#;;
for(var i=0;i<;i++){
for(var j=0;j<;j++){
str += &#;<li style=&#;left: &#;+(j*)+&#;px;top: &#;+(i*)+&#;px;background-position: &#;+(j*-)+&#;px &#;+(i*-)+&#;px;&#;></li>&#;;
}
}
$(&#;ul&#;).html(str);
$(&#;button&#;).click(function(){
//$(&#;li&#;).delay(Math.random()*).show()
$(&#;li&#;).each(function(){
$(this).delay(Math.random()*).fadeIn,&#;easeInOutBounce&#;);
})
})
</script>
</body>
</html>页面滚动到顶部的效果
$(&#;html, body&#;).animate({scrollTop:0}, ); //页面滚动实例: 返回顶部
<!DOCTYPE html>
<html>
<head>
<meta charset=&#;UTF-8&#;>
<title></title>
<style type=&#;text/css&#;>
*{
margin: 0;
padding: 0;
}
body{
width: %;
height: 5000px;
background-image: linear-gradient(red,blue,orange,green,pink,yellow);
}
a{
width: 50px;
height: 50px;
color: #;
font-size: 14px;
text-align: center;
line-height: 25px;
border: 1px solid #;
background-color: #fff;
text-decoration: none;
position: fixed;
right: 50px;
bottom: 50px;
}
</style>
</head>
<body>
<a href=&#;javascript:;&#;>返回<br/>顶部</a>
<script src=&#;js/jquery-.js&#; type=&#;text/javascript&#; charset=&#;utf-8&#;></script>
<script type=&#;text/javascript&#;>
$(&#;a&#;).click(function(){
//返回顶部特定写法
$(&#;html,body&#;).animate({
&#;scrollTop&#;: 0
})
});
</script>
</body>
</html>