JQuery动画。事件

让元素隐藏出现
通过控制元素的宽高，来实现

hide(slow|normal|fast|num) //元素隐藏
show() //元素出现
toggle() //合成写法
让元素淡入淡出
通过控制元素的透明度来实现，出现隐藏

fadeIn(); //淡入
fadeOut(); //淡出
fadeToggle(); //合成
卷帘式
通过控制元素的高度来实现

slideUp();
slideDown();
slideToggle();
自定义动画

("div").animate(最终状态,执行时间,回调函数);("div").animate({"top":"500px"},2000,function(){console.log("down");});
$("div").animate({"left":"500px","top":"500px"},2000);//同时执行
**延迟动画 **

$("div").delay(2000).animate({"left":"+=500"},2000);
stop(是否清空动画队列,是否显示最终效果)

("div").hover(function(){(this).stop(true);
(this).animate({"width":"400px"},1000) .animate({"height":"400px"},1000) },function(){(this).stop(true);//停止动画
$(this).animate({"width":"200px"},1000)
.animate({"height":"200px"},1000)
})
事件触发
jQuery中有两种事件触发

("button").click(); //只能用于官方定义的事件(":text").trigger("focus");
自定义事件
注意：自定义事件 必须通过on bind绑定

$("button").on("myEvent",function(){alert("自定义事件");})
触发自定义的事件

$("button").trigger("myEvent");
给div自定义上滑下滑左滑右滑的事件

("div").on("slideup",function(){(this).html("上滑");})
.on("slidedown",function(){(this).html("下滑");}) .on("slideleft",function(){(this).html("左滑");})
.on("slideright",function(){(this).html("右滑");}); var startX,startY;("div").mousedown(function(e){
startX = e.pageX;
startY = e.pageY;
}).mouseup(function(e){
var endX = e.pageX;
var endY = e.pageY;
if ( endY<startY-50&&Math.abs(endX-startX)<50 ) {
(this).trigger("slideup"); } if (endY>startY+50&&Math.abs(endX-startX)<50) {(this).trigger("slidedown");
}
if (endX<startX-50&&Math.abs(endY-startY)<50) {
(this).trigger("slideleft"); } if (endX>startX+50&&Math.abs(endY-startY)<50) {(this).trigger("slideright");
}
});