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中有两种事件触发

1. $("button").click(); //只能用于官方定义的事件

2. $(":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 ( endYstartY+50&&Math.abs(endX-startX)<50) {
                    $(this).trigger("slidedown");
                }
                if (endXstartX+50&&Math.abs(endY-startY)<50) {
                    $(this).trigger("slideright");
                }
            }); 

---

事件委托

事件委托，也叫事件代理。利用事件冒泡给父元素添加事件处理程序，从而使所有子元素都可以处理该事件。

优点：

1. 减少DOM操作，提高交互效率。

2. 新添加的子元素同样可以响应事件。

   $("ul").click(function(e){
   //e.target指的是li DOM节点
   $(e.target).css("background-color","red");
   });

练习：

$("table").click(function(e){
    console.log(e.target);
    // not("筛选条件")  去除指定筛选条件的元素
    $(e.target).not("tbody,tr").css("background-color","red");
})