利用animate()方法
animate(params,[duration],[easing],[callback])
个中params为希望进行变换的CSS属性列表,以及希望变革到的终极值;
须要特殊指出,params中的变量遵照camel(驼峰式)命名办法,例如：paddingLeft不能写成padding_left
params只能是CSS中用数值表示的属性,例如width、top、opacity等，像backgroundColor这样的属性不被animate()支持;
属性值必须加引号,例如：width: "90%",用逗号隔开
duration为持续的韶光,三种预定速率之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fast: 快速的
easing为可选参数,常日供动画插件利用,用来掌握变革工程的节奏,jQuery中只供应了linear和swing两个值
jQuery 代码:
点击按钮后div元素的几个不同属性一同变革
// 在一个动画中同时运用三种类型的效果
$("#go").click(function(){ $("#block").animate({ width:"90%", height:"100%", fontSize:"10em", borderWidth:"10px" }, 1000 );});
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 #000033;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){ $("input:first").click(function(){ $("#block").animate({ left: "-=80px" //相对左移 },300); }); $("input:last").click(function(){ $("#block").animate({ left: "+=80px" //相对右移 },300); });});</script></head><body><input type="button" value="<<左"> <input type="button" value="右>>"><div id="block"><img src="05.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"
在600毫秒内切换段落的高度和透明度
jQuery 代码:
$("p").animate({height: 'toggle', opacity: 'toggle'}, "slow");
用500毫秒将段落移到left为50的地方并且完备清晰显示出来（透明度为1）
jQuery 代码:
$("p").animate({left: 50, opacity: 'show'}, 500);
一个利用"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:"90%"},{queue:false,duration:1500}) .animate({fontSize:"24px"},1000) .animate({borderRightWidth:"20px"},1000); }); $("input:eq(1)").click(function(){ //依次实行三个animate $("#block2").animate({width:"90%"},1500) .animate({fontSize:"24px"}, 1000) .animate({borderRightWidth:"20px"}, 1000); }); $("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(5000).animate({"width": "500px"});})
HTML代码:
<button>延迟实行</button><ul><li>1111</li></ul>
实例: delay殊效
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><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-2.2.4.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<10;i++){for(var j=0;j<10;j++){str += "<li style='left: "+(j50)+"px;top: "+(i50)+"px;background-position: "+(j-50)+"px "+(i-50)+"px;'></li>";}}$("ul").html(str);$("button").click(function(){//$("li").delay(Math.random()1000).show()$("li").each(function(){$(this).delay(Math.random()1000).fadeIn(100,"easeInOutBounce");})})</script></body></html>
页面滚动到顶部的效果
$('html, body').animate({scrollTop:0}, 500); //页面滚动
实例: 返回顶部
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">{margin: 0;padding: 0;}body{width: 100%;height: 5000px;background-image: linear-gradient(red,blue,orange,green,pink,yellow);}a{width: 50px;height: 50px;color: #000;font-size: 14px;text-align: center;line-height: 25px;border: 1px solid #000;background-color: #fff;text-decoration: none;position: fixed;right: 50px;bottom: 50px;}</style></head><body><a href="javascript:;">返回<br/>顶部</a><script src="js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$("a").click(function(){//返回顶部特定写法$("html,body").animate({"scrollTop": 0})});</script></body></html>
