jQuery学习笔记（6.2）动画（自定义动画与stop()方法,callback()方法）

1. 自定义动画

1.操作单个属性

$().animate({});
例：
html：

<button>1</button>
<div style="background:black;height:50px;width:50px;position:absolute;"></div>

js:

$(ducument).ready(function(){
	$("button").click(function(){
		$("div").animate({left:'50px'});
	});
});

向左移动到left属性值等于50px；

2.操作多个属性
$().animate({键值对形式});
例:
html:

<button>1</button>
<div style="background:black;height:50px;width:50px;position:absolute;"></div>

js

$(ducument).ready(function(){
	$("button").click(function(){
		$("div").animate({
		left:'50px'
		height:"100px";
		weight:"100px";
		});
	});
});

高度变成100px；宽度变成100px； 向左移动到left属性值等于50px；(同时进行)

3.操作多个属性以队列的形式逐一操作
例：
html：

<button>1</button>
<div style="background:black;height:50px;width:50px;position:absolute;"></div>

js：

$(documen).ready(function(){
	$("button").click(function(){
		$(div).animate({left:"50px"})；
		$(div).animate({height:"100px"})；
		$(div).animate({weight:"100px"})；
	});
});

div先向左移动到left属性值等于50px；再高度变成100px；然后宽度变成100px；

2.stop（）方法

stop方法用于解决动画执行慢，产生拖延效果的问题，例如当一个点击事件执行时又收到了下一个点击事件，这个时候就需要用到stop方法，
stop方法有两个参数
clearQueue:是否清除动画队列 返回值： true false
jumpToEnd:是否跳转到当前动画的最终效果 返回值： true false
默认值都是是true；
用法：只要在动画执行之前用stop（）即可
例：

$(documen).ready(function(){
	$("button").click(function(){
		$(div).stop().animate({left:"50px"})；
	});
});

3.callback方法

动画之后需要执行语句，使用 callback 函数（回调函数）
例：

$(documen).ready(function(){
	$("button").click(function(){
		$(div).hide(function(){
			alert("hello world");
		})；
	});
});