[jQuery] 事件和动画详解(2)

如果没有参数,则删除所有绑定的事件。如果提供了事件类型,则只删除该类型的绑定事件。如果把在绑定时传递的处理函数作为第二个参娄和,则只有这个特定事件处理函数才会被删除,例如:

$("#delAll").click()( $("#btn").unbind("click"); );

one()方法的结构与bind()方法类似,使用方法也与bind()方法相,语法结构如下:

one(type[,data],fn);

使用one()方法为元素帮定事件后,只在第一次触发时执行,之后毫无作用。

1.7 模拟操作

有时需要通过模拟用户操作,来达到单击效果,可以使用trigger()方法完成,例如:

$("#btn").trigger("click");

也可以直接用简化写法click()来达到同样的效果。

trigger(type[,data])方法有两个参数,第二个参数是要传递给事件处理函数的附加数据,以数组形式传递。

trigger()方法触发事件后,会执行浏览器默认操作,例如:

$("input").trigger("focus");

以上代码不仅会触发focus事件,也会使input元素本身得到焦点,如果不想执行浏览器默认操作,可以使用另一个类似的方法triggerHandler()方法。

2. 动画

 2.1 show()方法和hide()方法

show()方法和hide()方法是jQuery中最基本的动画方法。为一个元素调用hide()方法,会将该元素的display样式改为"none",例如:

$("#mydiv").hide();

当把元素隐藏后,可以使用show()方法将元素的display样式设置为先前的显示状态,例如:

$("#mydiv").show();

show()方法可以指定一个速度参数,例如,指定一个速度关键字"slow",例如:

$("#mydiv").show("slow");

运行该代码后,元素将在600毫秒内慢慢显示,其他的速度关键字还有"normal"和"fast",不仅如此,还可以为显示速度指定一个数字,单位是毫秒。

2.2 fadeIn()方法和fadeOut()方法

与show()方法不同的时,fadeIn()和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定时间内降低元素的不透明度,直到元素完全消失。fadeIn()方法则相反,例如:

$("#mydiv").fadeOut();

2.3 slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为"none",当调用slideDown()方法时,这个元素将由上至下延伸显示。slideUp()方法正好相反,元素将由下到上缩短隐藏,例如:

$("#mydiv").slideDown();

2.4 自定义动画方法animate()

如果需要采取一些高级的自定义动画来解决更多控制的问题,可以使用animate()方法来自定义动画,语法结构为:

animate(params,speed,callback);

params包含样式属性及值的映射,比如{property1:"value1",property2:"value2",...},speed是可选的速度参数,callback是在动画完成时执行的函数,例如:

$("#mydiv").animate({left:"+=500px"},300);

"+="符号或"-="符号即表示在当前位置累加或者累减。如果需要同时执行多个动画,可以写如下代码:

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

如果只想按顺序执行动画,只需把代码拆开即可,例如:

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

或者:

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

2.5 停止动画和判断是否处于动画状态

很多时候需要停止匹配元素正在进行的动画,需要使用stop()方法,语法结构为:

stop([clearQueue][,gotoEnd]);

参数clearQueue和gotoEnd都是可选的参数,为Boolean值,clearQueue代表是否要清空未执行完的动画队列,gotoEnd代表是否直接将正在执行的动画跳转到末状态。

在使用animate()方法的时候,要避免动画积累而导致的动画与用户的行为不一致,解决方法是判断元素是否正处于动画状态,例如:

if(!$("#mydiv").is("animated")){ }

2.6 其他动画方法

jQuery中还有3个专门用于交互的动画方法:toggle(speed,[callback]),slideToggle(speed,[callback]),fadeTo(speed,opacity,[callback])。

toggle()方法可以切换元素的可见状态,例如:

$("#mydiv").click(function(){ $(this).next("div.content").toggle(); });

slideToggle()方法通过高度变化来切换匹配元素的可见性,例如:

$("#mydiv").click(function(){ $(this).next("div.content").slideToggle(); });

fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值,例如:

$("#mydiv").click(function(){ $(this).next("div.content").fadeTo(600,0.2); });

总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/72719d98204230325af06b64e4d7a95a.html