jQuery 自定义动画——animate
自定义动画
使用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 代码:
Hello!相对变化的自定义动画
在params的CSS属性列表中,jQuery还允许使用"+="或者"-="来表示相对变化(多次变化)
animate()方法
<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>
让指定元素左右移动
jQuery 代码:
$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow"); //+50px只能移动一次
});
$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow"); //-50px只能移动一次
});HTML 代码:
另外在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代码:
Block1
Block2delay(duration,[queueName])
设置一个延时来推迟执行队列中之后的项目。
jQuery代码:
$("button").click(function(){
//$("li").animate(参与过渡的属性,时长,效果,回调函数);
$("li").delay(5000).animate({
"width": "500px"
});
})HTML代码:
- 1111
实例: delay特效
Document
<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 j50pxtop: i50pxbackground-position: j-50px i-50px>";
}
}
$("ul").html(str);
$("button").click(function(){
//$("li").delay(Math.random()*1000).show()
$("li").each(function(){
$(this).delay(Math.random()*1000).fadeIn(100,"easeInOutBounce");
})
})
</script>
页面滚动到顶部的效果
$('html, body').animate({scrollTop:0}, 500); //页面滚动实例: 返回顶部
顶部
<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>
