jquery04事件&动画

jQuery04（事件&动画）

1 jQuery事件
***1.1 mouseenter()与mouseleave()
1.2 合成事件
1.3 模拟事件（jQuery精华）
1.4 委托事件（绑定事件）与解绑事件

2 jQuery 动画
2.1 显示与隐藏
2.2 淡入淡出
2.3 划入划出
2.4 动画
2.4.1 自定义动画
2.4.2 延迟动画
2.4.3 停止动画
2.4.4判断动画状态***

1 合成事件/事件切换

 //1.3 合成事件/事件切换
                --hover()悬停控制元素[div]的显示和隐藏
                  $("#aa").hide();//隐藏
                 $("#aa").hover(function(){//鼠标移上
                     $("#aa").show();//显示
                 },function(){//鼠标移出
                    $("#aa").hide();//隐藏
                	})

hover()：鼠标悬停合成事件
    鼠标移上去第一个函数
    鼠标移除第二个函数

toggle()：鼠标点击合成事件

事件传播（事件冒泡）

小p->中div->大body
                 分别添加点击事件
                $("p").click(function(){undefined
                              console.info("p被打了");
                          })
                         $("div").click(function(){undefined
                             console.info("div被打了");
                            return false;//阻断
                      })
                         $("body").click(function(){undefined
                            console.info("body被打了");
                        }) 

传播：小-->中-->大
阻止传播：事件后面加上  return false

事件坐标
offsetX：当前元素左上角
clientX：窗口左上角
pageX：网页左上角

移除事件：
元素.unbind(“事件名”)

注意1：一般情况下，不会使用unbind，推荐使用变量控制事件

注意2：如果某个元素只允许使用一次事件，则可以使用one()

 //--按钮只能点击一次[2]
                       $("#btn").on("click",function()){undefined
                         // 做一系列事情
                         console.info(44944);
                         // 将点击事件进行移除
                        $("#btn").off("click");//unbind
                          // 将按钮禁用
                        $("#btn").attr("disabled",true);
                      } 

                     $("#btn").one("click"function(){undefined
                         console.info(43999);
                 // 将按钮禁用
                     $("#btn").attr("disabled",true);
                  }) 

                //--按钮点击偶数次可行 奇数次不行
                var i=1;
                 $("#btn").click(function(){undefined
                      if(i%2==0){undefined
                          console.info(44944,i);//做一系列的事
                    }
                     i++;
                }) 

*** 二、动画 ***

          
               //2.1 基本动画 [回调函数]
                 $("#aa").hide(); //，默认隐藏
                    $("#xx").on("click", function() {undefined
                   $("#aa").show(1000, function() {undefined
                        //回调函数
                       alert(123);
                    }); //1s 显示
              })
                 $("#yy").on("click", function() {undefined
                    $("#aa").hide(2000); //隐藏
               })
                 $("#zz").on("click", function() {undefined
                     $("#aa").toggle(1000); //切换
               }) 
               

//2.2 滑动动画

                
                $("#aa").hide(); //，默认隐藏
                 $("#xx").on("click", function() {undefined
                     $("#aa").slideUp(1000, function(){//1s 显示
                })
                  $("#yy").on("click", function() {undefined
                      $("#aa").slideDown(2000); //隐藏
               })
               $("#zz").on("click", function() {undefined
                    $("#aa").slideToggle(1000); //切换
               })

//2.3 淡入淡出(透明度)

           
                $("#aa").hide(); //，默认隐藏
              $("#xx").on("click", function() {undefined
                      $("#aa").fadeIn(1000, function()) //1s 显示
               })
               $("#yy").on("click", function() {undefined
                     $("#aa").fadeOut(2000); //隐藏
                 })
                 $("#zz").on("click", function() {undefined
                     $("#aa").fadeToggle(1000); //切换
                }) 

//2.4 自定义动画

                //--缩放
                 $("#bbb").click(function(){undefined
                     $("#aa").animate({undefined
                          width:100px,
                         heigth:300px
                      },1000);
                  })
                 //--移动[2]
                  $("#bbb").click(function(){undefined
                      $("#aa").animate({undefined
                          left:100,
                          top:300
                     },1000);
                 })
                 // 在自身基础上移动
                 $("#bbb").click(function(){undefined
                      $("#aa").animate({undefined
                          left:"+=5",
                      top:"+=8"
                      },1000);
                  })
                 // 利用动画模拟心跳的感觉
                /* 利用模拟灰太狼退场 */
                 /* 完成并掌握课题代码 */
                 
                 $("#bbb").click(function(){undefined
                     $("#aa").addClass("xyz");
                 })