您的位置：首页 > Web前端 > JQuery

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

2015-04-24 09:30 429 查看

一.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所有的动画效果方法

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航