jQuery动画基础

jQuery hide()和show()

通过jQuery，你可以使用hide()和show()方法来隐藏和显示HTML元素

var tip="隐藏";
	$("#btn").click(function(){
		if(tip=="隐藏"){
			$("#box").hide();
			tip="显示";
			$(this).val(tip);
		}else{
			$("#box").show();
			tip="隐藏";
			$(this).val(tip);
		}
	});

显示隐藏的缓冲动画

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的speed参数规定隐藏/显示的速度，可以取以下值："slow","fast"或毫秒。

可选的callback参数是隐藏或显示完成后执行的函数名称。

show与hide方法是非常常用的，但是一般很少会基于这2个属性执行动画，大多情况下还是直接操作元素的显示与隐藏为主。

var tip="隐藏";
	$("#btn").click(function(){
		if(tip=="隐藏"){
			$("#box").hide(2000);//2秒隐藏的缓冲动画
			tip="显示";
			$(this).val(tip);
		}else{
			$("#box").show(1000);//1秒显示的缓冲动画
			tip="隐藏";
			$(this).val(tip);
		}
		
	});

$("#box").hide(3000).show(3000);//元素执行3秒的隐藏动画，然后执行3秒的显示动画

jQuery toggle()

通过jQuery，你可以使用toggle()方法来切换hide()和show()方法。

先是被隐藏的元素，并隐藏已显示的元素：

$("#box").toggle();

toggle的缓冲动画

语法：

$(selector).toggle(speed,callback);

可选的speed参数规定隐藏/显示的速度，可以取以下值："slow"、"fast"或毫秒。

可选的callback参数是toggle()方法完成后所执行的函数名称。

jQuery slideDown()方法

jQuery slideDown()方法用于向下滑动的元素。

语法:

$(selector).slideDown(speed,callback);

可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

speed是以毫秒为单位的，数值越大，动画越慢,不是越快。字符串"fast"和"slow"分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个speed被省略，那么默认使用400毫秒的延时。

可选的callback参数是slideDown()方法完成后所执行的函数名称。

$("#box").slideDown();//下拉动画

jQuery slideUp()方法

jQuery slideUp()方法用于向上滑动的元素。

语法:

$(selector).slideUp(speed,callback);

可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

speed是以毫秒为单位的，数值越大，动画越慢,不是越快。字符串"fast"和"slow"分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个speed被省略，那么默认使用400毫秒的延时。

可选的callback参数是slideUp()方法完成后所执行的函数名称。

$("#box").slideUp();//上拉动画

$("#box").slideUp(800).slideDown(800);//元素执行0.8秒的上拉动画，然后执行0.8秒的下拉动画

jQuery slideToggle()方法

jQuery slideToggle()方法可以在sildeDown()与slideUp()方法之间进行切换。

如果元素向下滑动，则slideToggle()可向上滑动它们。

如果元素向上滑动，则slideToggle()可向下滑动它们。

$(selector).slideToggle(speed,callback);

可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

speed是以毫秒为单位的，数值越大，动画越慢,不是越快。字符串"fast"和"slow"分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个speed被省略，那么默认使用400毫秒的延时。

可选的callback参数是slideToggle()方法完成后所执行的函数名称。

$("#box").slideToggle();

jQuery fadeOut()方法

jQuery fadeOut()方法用于淡出可见元素。

语法：

$(selector).fadeOut(speed,callback);

可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

speed是以毫秒为单位的，数值越大，动画越慢,不是越快。字符串"fast"和"slow"分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个speed被省略，那么默认使用400毫秒的延时。

可选的callback参数是fadeOut()方法完成后所执行的函数名称。

$("#box").fadeOut();//淡出效果

jQuery fadeIn()方法

jQuery fadeIn()方法用于淡入已隐藏的元素。

语法：

$(selector).fadeIn(speed,callback);

可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

speed是以毫秒为单位的，数值越大，动画越慢,不是越快。字符串"fast"和"slow"分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个speed被省略，那么默认使用400毫秒的延时。

可选的callback参数是fadeIn()方法完成后所执行的函数名称。

$("#box").fadeIn();//淡入效果

$("#box").fadeOut(1000).fadeIn(1000);//元素执行1秒的淡出动画，然后执行1秒的淡入动画

jQuery fadeToggle()方法

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

如果元素已淡出，则fadeToggle()会像元素添加淡入效果。

如果元素已淡入，则fadeToggle()会像元素添加淡出效果。

语法：

$(selector).fadeToggle(speed,callback);

可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

speed是以毫秒为单位的，数值越大，动画越慢,不是越快。字符串"fast"和"slow"分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个speed被省略，那么默认使用400毫秒的延时。

可选的callback参数是fadeToggle()方法完成后所执行的函数名称。

$("#box").fadeToggle();

jQuery fadeTo()方法

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

语法：

$(selector).fadeTo(speed,opacity,callback);

必需的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

fadeTo()方法中的opacity参数淡入淡出效果设置为给定的不透明度(值介于0与1之间)。

可选的callback参数是fadeTo()方法完成后所执行的函数名称。

$("#box").fadeTo("slow",0.2);

JQuery动画-animate()方法

jQuery animate({params},speed,callback);

必须的params参数定义形成动画的CSS属性。

可选的speed参数规定效果的时长。它可以取下值："slow"、"fast"或毫秒。

speed是以毫秒为单位的，数值越大，动画越慢,不是越快。字符串"fast"和"slow"分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个speed被省略，那么默认使用400毫秒的延时。

可选的callback参数是动画完成后所执行的函数名称。

var tip="隐藏";
	$("#btn").click(function(){
		if(tip=="隐藏"){
			$("#box").animate({
			height:0,
			width:0,
			opacity:0
		    },1000);
		    tip="显示";
			$(this).val(tip);
		}else{
			$("#box").animate({
			height:"100px",
			width:"500px",
			opacity:1
		    },1000);
		    tip="隐藏";
			$(this).val(tip);
		}
	});

JQuery animate()-使用相对值

如果一个以+=或-=开始的值，那么目标值就是以这个属性的值加上或者减去给定的数字来计算的

 $("#box").animate({
       	width:"+=50px",
       	height:"+=10px",
       	opacity:"+=0.1"
       },1000);

JQuery animate()-使用预定义的值

你甚至可以把属性值设为"show"、"hide"、"toggle":

$("#box").animate({
       	width:"toggle",
       	height:"toggle",
       	opacity:"toggle"
       },1000);

JQuery animate()-使用队列功能
这意味着如果你在彼此之后编写多个animate()调用，jQuery会创建包含这些方法调用的“内部”队列。然后逐一运行这些animate调用。

//写法一
      var box=$("#box");
      box.animate({width:"50px"},"slow");
      box.animate({height:"10px"},"slow");
      box.animate({opacity:0.2},"slow");

//写法二
      var box=$("#box");
      box.animate({width:"50px"},"slow").animate({height:"10px"},"slow").animate({opacity:0.2},"slow");

jQuery stop()方法

jQuery stop()方法用于停止动画或效果，在它们完成之前。

stop()方法适用于所有jQuery效果函数，包含滑动，淡入淡出和自定义动画。
语法：

$(selector).stop(stopAll,goToEnd);

可选的stopAll参数规定是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的goToEnd参数规定是否立即完成当前动画。默认是false。

因此默认地，stop()会清除在被选元素上指定的当前动画。

var box=$("#box");
	$("#btn").click(function(){
      box.animate({width:"50px"},2000);
      box.animate({height:"10px"},2000);
      box.animate({opacity:0.2},2000);
	});
	$("#btn1").click(function(){
		box.stop();//只会停止当前动画，下一个继续
	});

var box=$("#box");
	$("#btn").click(function(){
      box.animate({width:"50px"},2000);
      box.animate({height:"10px"},2000);
      box.animate({opacity:0.2},2000);
	});
	$("#btn1").click(function(){
		box.stop(true);//停止所有动画
	});

var box=$("#box");
	$("#btn").click(function(){
      box.animate({width:"50px"},2000);
      box.animate({height:"10px"},2000);
      box.animate({opacity:0.2},2000);
	});
	$("#btn1").click(function(){
		box.stop(true,true);//停止所有动画,并且跳到该动画最终状态
	});

var box=$("#box");
	$("#btn").click(function(){
      box.animate({width:"50px"},2000);
      box.animate({height:"10px"},2000);
      box.animate({opacity:0.2},2000);
	});
	$("#btn1").click(function(){
		box.stop(false,true);//当前动画跳到最终状态，继续执行下一个动画
	});