第四部分 jQuery中的事件和动画

来源：互联网发布：55开和笑笑知乎编辑：程序博客网时间：2024/06/05 19:53

一.jQuery中的事件

1.加载DOM

$(document).ready();  $(window).load(function(){}只要DOM加载完就页面所有内容（包括窗口、框架、
对象和图像等）加载完多次使用   只能使用一次

$(document).ready(function(){}); 简写为 $(function(){})

$(window).load(function(){

//编写代码

})

等价于JavaScript中的以下代码

window.onload = function(){

//编写代码

}

2.事件绑定

bind()方法的调用格式为

bind(type,fn);

第一个参数是事件类型

包括：blur、focus、load、resize scroll unload click等等

第二个参数是用来绑定的处理函数

注：jQuery中关键字this是js对象，所以经常见到$(this)

3.合成事件

jQuery中有两个合成事件--------hover()方法和toggle()方法

（1）hover()方法

语法：hover(fn1,fn2)

用于模拟光标悬停事件，当光标移动到元素上时，会触发第一个函数fn1，当光标移出这个元素时，触发第二个函数fn2

（2）toggle()方法

语法：toggle(fn1,fn2,...fnN);

用于模拟鼠标连续单击事件。第一次单击，触发fn1,第二次单击，触发fn2,....。随后的每次单击都重复对这几个函数的轮番调用

4.移除事件

可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件

unbind();

二.jQuery中的动画

1.show()方法和hide()方法

在html文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”

$("element").hide(); //通过hide()方法隐藏元素

与用css()方法设置display属性效果相同

element.css("display","none");

设置显示的速度

$("element").show(“slow”);

关键字还有“normal” 与 “fast”

或

$("element").show(1000); //元素在1000毫秒内显示出来

$("element").hide(1000); //元素在1000毫秒内隐藏

2.fadeIn方法和fadeOut()方法

改变元素的不透明度

fadeOut方法会在指定的一段时间内降低元素的不透明度，直到完全消失（"display : none"）

3.slideUp()方法和slideDown()方法

只改变元素的高度

4.自定义动画方法animate()

animate(params,speed,callback);

参数说明：

（1）params：一个包含样式属性及值的映射

（2）speed：速度参数，可选。

（3）callback：在动画完成时执行的函数，可选。

1.自定义简单动画

<!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8"><script src="app/framework/jquery-1.9.1.js"></script><script type="text/javascript">  $(function(){            $("#panel").click(function(){           $(this).animate({left:"500px"}, 3000);           });      });</script><style type="text/css">#panel {    position: relative;    width: 100px;    height: 100px;    border: 1px solid #0050D0;    background: #96E555;    cursor: pointer;}</style></head><body>    <div id="panel"></div></body></html>

2.累加、累减动画

在之前的代码中，设置了{left：”500px“}作为动画参数。如果在之前加上”+=“或”-=“符号即表示在当前位置累加或者累减

 $(function(){            $("#panel").click(function(){           $(this).animate({left:"+=500px"}, 3000);           });      });

3.多重动画

（1）同时执行多个动画

 $(function(){            $("#panel").click(function(){           $(this).animate({left:"500px",height:"200px"}, 3000);           });      });

（2）按顺序执行多个动画

上例中两个动画效果是同时发生的，如果要按顺序执行动画，只需要把代码拆开，然后按照顺序写就可以了

$(this).animate({left:"500px"}, 3000);$(this).animate({height:"200px"}, 3000);

或者写成链式的

$(this).animate({left:"500px"}, 3000);       .animate({height:"200px"}, 3000);

4.综合动画

接下来完成更复杂的

 $(function(){       $("#panel").css("opacity","0.5");       $("#panel").click(function(){          $(this).animate({left:"400px",height:"200px",opacity:"1"}, 3000)                 .animate({top:"200px",width:"200px"},3000)                 .fadeOut("slow");                      });      });

5.动画回调函数

想在上例中切换元素的css样式

css("border","5px solid blue");

对比下面的效果

（1）

  $(function(){       $("#panel").css("opacity","0.5");       $("#panel").click(function(){           //alert("dd");          $(this).animate({left:"400px",height:"200px",opacity:"1"}, 3000)                 .animate({top:"200px",width:"200px"},3000)                 .css("border","5px solid blue");                  });      });

（2）

  $(function(){       $("#panel").css("opacity","0.5");       $("#panel").click(function(){           //alert("dd");          $(this).animate({left:"400px",height:"200px",opacity:"1"}, 3000)                 .animate({top:"200px",width:"200px"},3000,function(){                     $(this).css("border","5px solid blue");                     });                      });      });

发现第二种可以实现想要的效果，第一种不可以，出现这样的原因是css()方法不会加入到动画队列中。

callback回调函数适用于jQuery所有的动画效果方法

0 0