5.jquery事件与动画

一.事件(重要)

1.jquery绑定事件

jQuery对象.bind(“事件名”,可选参数,事件处理函数)

注意:

1.第二个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象.

2.事件名不要加on

jquery对象.bind("事件名",function(){

})

需求: 点击 h5标题后,显示h5下的div

点击标题后

演示代码:

<!DOCTYPE html>

<html>

<head>

* {

margin: 0px;

padding: 0px;

}

body {

font-size: 13px;

line-height: 130%;

padding: 60px;

}

#panel {

width: 300px;

border: 1px solid #0050D0;

}

.head {

padding: 5px;

background: #96E555;

cursor: pointer;

}

.content {

padding: 10px;

text-indent: 2em;

border-top: 1px solid #0050D0;

display: none;

}

</style>

$(function() {

//需求: 点击标题后显示标题下面的div

$("#panel h5.head").bind("click",function(){

//让标题下面的div显示

$(this).next().show();

});

</script>

</head>

<body>

<h5 class="head">什么是jQuery?</h5>

jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

</div>

</body>

</html>

2.取消绑定

1.取消click事件的所有事件处理函数

jQuery对象.unbind("click")

2.取消click事件的事件处理函数f2

jQuery对象.unbind("click",f2);

fn1=function(){} 这个也可以作为函数的参数,相当于

function(){},并且这个函数叫fn1

3.只执行一次事件

对象.one("事件名",事件处理函数);//只执行一次

4.触发某一个事件

对象.trigger("click"); //相当于对象.click();

5.div的显示和隐藏

div.show("slow");

div.show("normal");

div.show("fast");

可见就隐藏,不可见就显示

if(div对象.is(":visible")){

div对象.hide(3000);

}else{

div对象.show(3000);

}

6.改变绑定事件的类型

mouseover

mouseout

演示代码:

$(function() {

//需求: 点击标题后显示标题下面的div

$("#panel").bind("mouseover", function() {

$(this).find("div.content").show();

});

$("#panel").bind("mouseout", function() {

$(this).find("div.content").hide();

});

或者合成一句

$(function() {

//需求: 点击标题后显示标题下面的div

$("#panel").bind("mouseover", function() {

$(this).find("div.content").show();

}).bind("mouseout", function() {

$(this).find("div.content").hide();

});

或者

$(function() {

//需求: 点击标题后显示标题下面的div

$("#panel").mouseover(function() {

$(this).find("div.content").show();

}).mouseout(function(){

$(this).find("div.content").hide();

});

选项卡的制作

演示代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>网页选项卡</title>

* {

margin: 0;

padding: 0;

}

body {

font: 12px/19px Arial, Helvetica, sans-serif;

color: #666;

}

.tab {

width: 240px;

}

.tab_menu {

clear: both;

}

.tab_menu li {

float: left;

text-align: center;

cursor: pointer;

list-style: none;

padding: 1px 6px;

margin-right: 4px;

background: #F1F1F1;

border: 1px solid #898989;

border-bottom: none;

}

.tab_menu li:hover {

background: #DFDFDF;

}

.tab_menu li.selected {

color: #FFF;

background: #6D84B4;

}

.tab_box {

clear: both;

border: 1px solid #898989;

height: 100px;

}

.hide {

display: none

}

</style>

$(function() {

//给所有的li绑定单击事件

var $menu_li = $("div.tab_menu li");

$menu_li.click(function(){

//1.将点击的li高亮

$(this).addClass("selected");

//并去掉其他的高亮

$(this).siblings().removeClass("selected");

//2.让对应的div显示

//点击第1个li 显示第1个div 点击第2个li 显示第2个div

//首先获得点击了第几个li

var clickedLiIndex = $menu_li.index($(this));

$("div.tab_box>div").eq(clickedLiIndex).show();

$("div.tab_box>div").eq(clickedLiIndex).siblings().hide();

});

</script>

</head>

<body>

<ul>

</ul>

</div>

</div>

</body>

</html>

合成事件 2个

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

1.hover(enter,leave);

hover = mouseover + mouseout ;

hover()方法用于模拟光标悬停事件.当光标移动到元素上时,执行第一个函数(enter),当光标移出这个元素时,会触发第二个函数(leave).

上面的例子可以改写成hover()方法

演示代码:

$("#panel").hover(function() {

$(this).find("div.content").show();

},function(){

$(this).find("div.content").hide();

});

2.toggle(事件处理函数1，事件处理函数2,….); //开关函数

jQuery1.9 以后取消了toggle事件

toogle(fn1,fn2,…fnN)

toogle()方法用于模拟鼠标连续单击事件。第1次单击元素,触发第一个函数(fn1),第二次单击同一个元素,触发fn2…如果有多个函数,依次触发,直到最后一个,随后的每次单击从头开始轮番调用这几个函数。

前面的单击标题例子中,使用了如下代码:

$(function() {

$("#btn1").click(function() {

var $div1 = $("#div1");

if ($div1.is(":visible")) {

$div1.hide(3000);

} else {

$div1.show(3000);

}

});

虽然能实现效果,但是这种方法不是最合适的.如果需要连续单击”标题”,来达到使”内容”显示和隐藏的目的,那么很适合使用toggle()方法

演示代码:

$(function() {

//需求: 点击标题后显示标题下面的div

$("#panel h5.head").toggle(function(){

//让层显示

$(this).next().show();

},function(){

//让层隐藏

$(this).next().hide();

});

toggle()方法还有另外一个作用:切换元素的可见状态.如果元素是可见的,单击切换后则隐藏；

如果元素是隐藏的,单击切换后则为可见的.

对于层来说 div对象.toggle();//显示的层变隐藏、隐藏的层变显示

加强效果

为了能有更好的用户体验,现在需要在用户单击”标题”后,不仅显示内容,而且高亮显示”标题”。

单击标题后,标题高亮显示

为了完成这一功能,首先在CSS中定义一个高亮的样式,CSS代码如下:

.highlight {

background-color:#ff3300;

}

演示代码:

$(function() {

//需求: 点击标题后显示标题下面的div

$("#panel").click(function() {

$(this).find("div.content").toggle();

$(this).find("h5").toggleClass("highlight");

});

学生练习:京东首页,送至 ”北京”

代码见: jQuery演示代码/事件和动画/hover事件练习(送至北京).html

二.动画

(一)内置动画

1.show()和hide()

div.show("slow");//0.6秒

div.show("normal");//0.4秒

div.show("fast");//0.2秒

div.show(毫秒);

如果不加参数直接调用show() 是立即显示没有动画效果

增加宽度(从左到右增大)、增加高度(从上到下增大),同时增加内容的不透明度

2.fadeIn()和fadeOut()淡入淡出效果

对象.fadeIn();//淡入增加不透明度

对象.fadeOut();//淡出减少不透明度直到元素完全消失(display:none)

与show()方法不同,fadeIn()和fadeOut()方法只改变元素的不透明度.

3.slideUp()、slideDown()收缩、展开效果(用于层)

slideUp()、slideDown() 只会改变元素的高度

动画积累问题解决

当用户快速在某个元素上执行animate()动画时,就会出现动画积累.解决方法是判断元素是否处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,如果元素正处于动画状态不添加动画.

$(function() {

//需求: 点击标题后显示标题下面的div

$("#panel").toggle(function(){

if(!$("#panel").find("div.content").is(":animated")){ //不处在动画状态中

$("#panel").find("div.content").slideDown("slow");

}

},function(){

if(!$("#panel").find("div.content").is(":animated")){

$("#panel").find("div.content").slideUp("slow");

}

});

(二)自定义动画 animate()

1. 自定义简单动画

animate({left:"500px"},3000,function(){alert(3);});

参数1：让div向右移动500px

参数2：移动所需的时间(可以省略)

参数3: 移动完成调用回调函数(可以省略)

完整演示代码如下:

<!DOCTYPE html>

<html>

<head>

#panel {

width:100px;

height:100px;

background-color:yellowgreen;

position:relative;

cursor:pointer;

}

</style>

$(function() {

$("#panel").click(function(){

$(this).animate({left:"500px"},3000,function(){

$(this).fadeOut(2000);

});

</script>

</head>

<body>

保存成功

</div>

</body>

</html>

2. 多重动画

(1)同时执行多个动画

<!DOCTYPE html>

<html>

<head>

* {

margin: 0px;

padding: 0px;

}

#img1 {

position:relative;

}

</style>

$(function() {

$("#img1").click(function(){

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

});

</script>

</head>

<body>

</body>

</html>

(2)按顺序执行多个动画

上例中是移动和调整宽度同时进行,如果想按顺序执行动画,例如先向右滑动,然后再放大它的高度,只需把代码拆开

$(function() {

$("#img1").click(function(){

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

$(this).animate({width:"200px"},3000);

});

因为animate都是对同一个jQuery对象操作的,也可以改为链式操作

$(function() {

$("#img1").click(function(){

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

animate({width:"200px"},3000);

});

像这样动画效果的执行具有先后顺序,称为”动画队列”.

3.综合动画

<!DOCTYPE html>

<html>

<head>

* {

margin: 0px;

padding: 0px;

}

#panel {

width:100px;

height:100px;

background-color: burlywood;

position:relative;

}

</style>

$(function() {

$("#panel").css("opacity","0.5");//设置不透明度

$("#panel").click(function(){

$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)

.animate({top:"200px",width:"200px"},3000)

.fadeOut("slow");

});

</script>

</head>

<body>

</div>

</body>

</html>

4.动画回调函数

如果想在最后一步切换元素的CSS样式,而不是隐藏元素.

需要把最后fadeOut(“slow”) 改为 .css("border","5px solid blue");

但是这样并不能得到预期效果,预期效果是在动画的最后一步改变元素的样式,而实际效果是刚开始执行的时候,css()方法就执行了.出现这个问题的原因是css()方法并不会加入到动画队列中,而是立即执行.可以使用回调函数(callback)对非动画方法实现排队.只要把css()方法写在最后一个动画的回调函数里即可.代码如下:

$(function() {

$("#panel").css("opacity","0.5");//设置不透明度

$("#panel").click(function(){

$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)

.animate({top:"200px",width:"200px"},3000,function(){

$("#panel").css("border","5px solid blue");

});

5.停止动画

$("#btn1").click(function(){

$("#panel").stop();//只能停止一个动画

});

6.延迟动画

$(function() {

$("#panel").css("opacity","0.5");//设置不透明度

$("#panel").click(function(){

$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)

.delay(3000)

.animate({top:"200px",width:"200px"},3000,function(){

$("#panel").css("border","5px solid blue");

});

//停止动画

$("#btn1").click(function(){

$("#panel").stop();

});

(三)其他动画方法

toggle()、slideToggle()、fadeTo()和fadeToToggle();

fadeTo() 把元素的不透明度调整到指定的值

$(function() {

//需求: 点击标题后显示标题下面的div

$("#panel h5.head").click(function(){

$(this).next().fadeTo(600,0.2);//600毫秒不透明度调整到0.2

});

})

在css中调整不透明度

.content {

padding: 10px;

text-indent: 2em;

border-top: 1px solid #0050D0;

background-color: rgba(255,0,0,0.5);//alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

}

fadeToToggle(); 对应fadeIn()和fadeOut()

学生作业：完成锋利的jQuery第四章中的实例--视频展示效果实例