jQuery的动画

文章目录

前言

jQuery 给我们封装了很多动画效果，其中最为常见的就是显示隐藏、滑动、淡入淡出和自定义动画。下面来看一下这些效果的使用方法。

一、jQuery隐藏显示

可以使用hide() 和show() 方法来隐藏和显示HTML元素。

//隐藏元素
$("#hide").click(function(){
	$("p").hide();
});
//显示元素
$("#show").click(function(){
	$("p").show();
});

也可以使用toggle() 方法来切换hide()和show()方法。

$("button").click(function(){
	$("p").toggle();
});

二、jQuery淡入淡出

fadeIn() 用于淡入已隐藏的元素
fadeOut() 用于淡出已隐藏的元素

$("button").click(function(){
	//淡入元素
	$("#div1").fadeIn();
	//可以添加参数
	$("#div2").fadeIn("slow");
	//淡出元素
	$("#div3").fadeOut(3000);
});

fadeToggle() 方法可以在fadeIn()与fadeOut()方法之间进行切换。

$("button").click(function(){
	$("#div2").fadeToggle("fast");
});

fadeTo() 方法允许渐变为给定的不透明度（值介于0与1之间）。

$("button").click(function(){
	$("#div1").fadeTo("slow",0.15);
});

三、jQuery滑动

slideDown() 方法用于向下滑动元素。
slideUp() 方法用于向上滑动元素。

$("#flip").click(function(){
	$("#div1").slideDown();
	$("#div1").slideUp();
});

slideToggle() 方法slideDown()与slideUp()方法之间进行切换。

$("#flip").click(function(){
	$("#panel").slideToggle();
});

四、jQuery自定义动画

animate() 方法用于创建自定义动画。可选的speed参数规定效果的时长。
它可以取以下值：“slow”、"fast"或毫秒。可选的callback参数是动画完成后所执行的函数名称。

$("button").click(function(){
	$("div").animate({
		left:'250px',
		opacity:'0.5',
		height:'150px',
		width:'150px'
	});
});

五、stop方法

jQuerystop() 方法用于停止动画或效果，在它们完成之前，适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。

$("#stop").click(function(){
	$("#panel").stop();
});

六、回调函数

在当前动画100%完成之后执行。

$("button").click(function(){
	$("p").hide("slow",function(){
		alert("段落现在被隐藏了");
	});
});

总结

以上就是今天要讲的内容。