jQuery--自定义动画.animate()

原创于 2020-03-22 19:56:44 发布 · 777 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍了jQuery中的.animate()方法，包括其自定义动画的语法、参数说明，以及如何利用它创建动画队列。同时，还讲解了jQuery的基本动画，如hide/show、fadeIn/fadeOut、slideDown/slideUp及其相关方法的使用。

.animate()自定义动画

jQuery的.animate（）方法可以通过更改元素的css属性值来实现动画效果；但是它也有一个小小的遗憾，就是无法通过该方法设置颜色的相关属性；不过jQuery提供了有关颜色的相关插件。

语法：$("selector").animate({params},speed,easing,callback);
参数说明：

params：【必选】该属性包含动画的相关属性及属性值；
speed：【可选】动画显示或隐藏的速度，单位毫秒；
easing：【可选】设置动画速度的函数，可选参数为“linear”、“swing”；
callback：【可选】动画结束后执行的函数名；

$("box").animate({
	left:"220px",//前提是该元素设置了定位属性；
	top:"220px",
	width:"500px",
	height:"500px",
	marginTop:"100px"//margin-top,此处要配合js语法使用驼峰式写法；	
}，3000，function(){alert("动画结束了!");})

.animate（）动画队列功能

通过调用多个.animate()创建动画，jQuery会创建包含这些方法调用的队列，并且依次执行；

//盒子移动到右上角；
$("box").animate({
	left:"500px",
	top:"0px"
}，2000});
//盒子移动到右下角；
$("box").animate({
	left:"500px",
	top:"500px"
}，2000});
//盒子移动到左下角；
$("box").animate({
	left:"0px",
	top:"500px"
}，2000});
//盒子移动到左上角；
$("box").animate({
	left:"0px",
	top:"0px"
}，2000});

jQuery基本动画

语法：$("selector").hide(speed,callback)/$("selector").show(speed,callback)
1. 显示/隐藏：hide()/show();

$("box").show();//显示元素；

$("box").hide();//隐藏元素；

toggle()方法；
语法：$("selector").toggle(speed,callback)；

$("box").toggle();//当前元素显示时调用该方法时隐藏，当前元素隐藏时调用该方法时显示；

2. 淡入/淡出：fadeIn()/fadeOut();
说明：fadeIn（）用于淡入隐藏的元素；fadeOut()用于淡出显示的元素；
语法：$("selector").fadeIn(speed,callback)；/$("selector").fadeOut(speed,callback)；

$("box").fadeIn(1000,function (){
	console.log("淡入结束!");
	})；
$("box").fadeOut(1000,function (){
	console.log("淡出结束!");
	})；

fadeToggle()方法；

$("box").fadeToggle(1000，function(){
	console.log("淡入淡出结束!");
	});
//当前元素完全显示或完全隐藏；

fadeTo()方法；
语法：$(selector).fadeTo(speed, opacity, callback);该方法的主要特点是可以设置透明度；

$("box").fadeTo(1000，0.5，function(){
	console.log("淡入淡出结束!");
	});
//opacity必写，并且取值在0~1之间；

3. 展开/收起：slideDown()/slideUp();
说明：slideDown()向下滑动元素；slideUp()向上滑动元素；
语法：$("selector").slideDown(speed,callback)；/$("selector").slideUp(speed,callback)；

$("box").slideDown()(1000,function (){
	console.log("下滑结束!");
	})；
$("box").slideUp(1000,function (){
	console.log("上滑结束!");
	})；

slideToggle方法；

$("box").slideTo(1000，0.5，function(){
	console.log("滑动结束!");
	});
	//当前元素上滑或下滑