jQuery04(事件&动画)

1.思维导图

 2.加载DOM两种方式(区别)

不可以写多个  多个被覆盖
            //             window.onClosed = function(){
            //                 console.info("js方式")
            //             }
 可以写多个,都会被执行
            //             $(document).ready(function(){
            //                 console.info("jQurey方式1")
            //             })

--元素.on/bind()

--hover()悬停控制元素[div]的显示和隐藏

//                 $("#aa").hide();//隐藏
                //                 $("a").hover(function(){//鼠标移上
                //                     $("#aa").show();//显示
                //                 },function(){//移出
                //                     $("#aa").hide();//隐藏
                //                 })

--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]

事件event的坐标[了解即可 pageX,pageY]
                //                 $("#aa").click(function(e){
                //                     console.info(e.pageX,e.pageY);//x,y坐标
                //                 })

效果展示：

 3.动画：

3.1基本动画：

$("#aa").hide();//默认隐藏
                                $("#xx").on("click",function(){//显示
                                    $("#aa").show(1000,function(){//回调函数
                                        alert("笑死")
                                    })
                                })
                                $("#yy").on("click",function(){//隐藏
                                    $("#aa").hide(1000）；
                                })
                                
                                $("#zz").on("click",function(){//切换
                                    $("#aa").toggle(1000);
                                    
                                })

效果展示：

 3.3 滑动动画

$("#aa").hide(); //默认隐藏
                //                 $("#xx").on("click", function() { //显示
                //                     $("#aa").slideDown(1000, function() { //回调函数
                //                         
                //                     });
                // 
                //                 })
                //                 $("#yy").on("click", function() { //隐藏
                //                     $("#aa").slideUp(1000);
                // 
                //                 })
                // 
                //                 $("#zz").on("click", function() { //切换
                //                     $("#aa").slideToggle(1000);
                // 
                //                 })

4.自定义动画

--缩放
                //                                 $("#bbb").click(function(){
                //                                     $("#aa").animate({
                //                                         width:100,
                //                                         heigt:300
                //                                     },1000)
                //                                 })

效果展示：

前

 后

 案例：心跳的感觉

 效果展示：爱心会左右颤抖