初识jQuery之jQuery中的运动和事件操作（五）

一、jQuery中的运动

1.animate() ：一个运动函数

第一个参数 : {} json，用来表示运动的值和属性

$('#div1').click(function(){
	$(this).animate({width : 300 , height : 300} );
//点击后div1的宽和高运动变化
//原来div1有原始的宽和高

第二个参数 : 时间(运动快慢的) 默认 : 400

$(this).animate({width : 300 , height : 300} , 4000 );
//div1在4秒内变化

第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(慢快慢) linear(匀速) )

$(this).animate({width : 300 , height : 300} , 4000 , ‘linear’)
//div1在4秒内匀速变化

第四个参数 : 回调函数

$(this).animate({width : 300 , height : 300} , 4000 , 'linear',function(){
			alert(123);
		});
//当运动执行完弹出123

可以利用JQ中的量式操作：

$(this).animate({width : 300} , 2000).delay(1000).animate({height : 300} , 2000);

2.stop()：停止运动（默认只阻止当前运动）

stop(true)：阻止后续的运动

stop(true,true)：可以立即停止到指定的目标点（只对当前本次运动而言）

finish()：立即停止到所有指定的目标点

$(this).animate({width : 300 , height : 300} , 4000 , 'linear',function(){
			alert(123);
		});
$('#div2').click(function(){
		
		$('#div1').stop();   //默认 : 只会阻止当前运动
		
		$('#div1').stop(true); //阻止后续的运动
		
		$('#div1').stop(true,true); //可以立即停止到指定的目标点
		
		$('#div1').finish();  //立即停止到所有指定的目标点
		
	});

3.delay()：延迟

delay(1000);//延迟1s
$(this).animate({width : 300} , 2000).delay(1000).animate({height : 300} , 2000); //当宽走完了停顿1s再走高

二、jQuery事件操作

1.delegate()：做事件委托

//点击li变红
('li').on('click',function(){
	this.style.background = 'red';
});
//利用事件委托
$('ul').delegate('li','click',function(){
	this.style.background = 'red';
});//利用冒泡原理，实际点击事件在ul上

优点：1.省略循环操作；

2.对后续添加事件直接适用

undelegate()：阻止事件委托

$(‘ul’).undelegate();

2.trigger()：主动触发

$('#div1').on('click',function(){
		alert(123);
	});
$('#div1').trigger('click');//使原本需要点击的事件，现在打开页面就可以发生

作用：1.打开页面便可调用函数

2.更好的适用于自定义事件

$(function(){
	
	$('#div1').on('show',function(){
		alert(123);
	});
	
	$('#div1').on('show',function(){
		alert(456);
	});
	
	$('#div1').trigger('show');
	//先弹出123，再弹出456
});

3.ev.data、ev.target和ev.type

$(function(){
	
	$('#div1').on('click',{name:'hello'},function(ev){
	      alert(ev.data.name);
		//Hello
		alert( ev.target );
		//当前操作的事件
		alert( ev.type );
		//当前操作事件的类型
	});

});