JQuery Chapter4 事件与动画
<!--
Goal:掌握JQuery中事件的绑定和动画的控制
-->
一,事件的绑定
事件的分类:blur,focus,load,unload,scroll,click,dblclick,mouseover,mouseout,mouseenter,mouseleave
mousemove,mousedown,mouseup,keydown,keyup,keypress....
事件的绑定有两种写法
1.$("对象名").bind("事件类型",function(){
//方法体
});
2.$("对象名").事件类型(funciton(){
//方法体
});
两种绑定方法的不同点:
第2种写法不能将事件移除,而第一种写法通过
$("对象名")
.unbind(方法名-没有括号);
.unbind("事件类型,如:click")
.unbind("事件类型",方法名-没有括号)
二,合成事件
其实前面我已经讲过了~合成事件就是把原来JS中的两个时间合成了一个事件!
1.$("对象名").hover(function(){
//mouse enter 事件代码
},function(){
//mouse leave 事件代码
});
2.这个就是很NX的一个方法了!
$("对象名").toggle(function(){
},function(){
},function(){
},.......);
这个可以写N个方法在里面,默认是鼠标单击触发,触发后会依次调用里面的方法,并且还会循环!
(发明这个方法的肯定得了不少的奖金)
三,事件的冒泡
<!-- 示例代码
<div>
<p><a href="#">Click Me</a></p>
</div>
<script type="text/javascript">
$("div").click(function(){
alert("What are you doing?I'm DIV");
});
$("p").click(function(){
alert("What are you doing?I'm tag P");
});
$("a").click(function(){
alert("What are you doing?I'm tag a");
});
</script>
-->
在上面的代码中,如果用户点击了a标签,那么将会触发三个事件!
所以~你应该懂了我在说什么!
为了避免这种情况,我们可以在a标签点击事件的末尾写上一个return,如果是表单提交事件~记得~return false;
事件触发的顺序,从最里面的标签逐步往外找!
四.动画
1,显示,隐藏动画:
a)对象名
.show()显示
.show(时间)动画效果,在规定时间内显示完毕
.show("fast/normal/slow")
.hide().hide(时间).hide("fast/normal/slow")
2.淡入淡出
对象
.fadeOut()--淡出
.fadeOut(参数)
.fadeIn()--淡入
.adeIn(参数)
3.改变对象的高度
对象
.slideUp([可选参数])--缩小对象的高度
.slideDown([可选参数])--变大对象的高度
4.自定义动画
a)开始动画
对象
.animate({left:"+=50px",top:"+=20p",width:"600px",.......},时间参数)
注:里面参数的写法,并且还可以设置动画列队,只需要在.animate().animate().....
动画在执行完毕后都会调用一个方法:回调函数!
eg:
对象.animate({XXXXX},600,funciton(){
//写入回调函数的代码
});
b)停止动画
对象名.stop();
c)判断对象是否处于动画状态
对象名.is(":animated"),注意animated前面有冒号,并且是过去式
(记得在前面我讲过获取正在动画的对象 $("对象名:animated"))
如果想正在执行动画的对象不再次执行动画,方法如下:
if(!$("对象名").is(":animated")){
//功能代码
}
五:还没想到,把鼠标拖动组件的代码在默一遍(假设移动的组件ID为:moveMe):
注意事项:要移动的组件的position一定要为absolute,并且有默认的top,left属性,并且该属性最好不是百分比!
$(function(){
//定义必需的变量
var allowMove=false;
var posX,posY;
$("#moveMe").mousedown(function(e){
allowMove=true;
posX=e.pageX-parseInt($(this).css("left"));
posY=e.pageY-parseInt($(this).css("top"));
}).mouseup(function(){
allowMove=false;
});
$(document).mousemove(function(e){
if(allowMove){
$("#moveMe").css({"top":e.pageY-posY,"left":e.pageX-posX});
}
});
});
//-----------------------------------------------------------
哈哈~以上代码就大功告成了,我写了十几遍了~总算是能够流畅的默写出来了!
六,突然想到了今天上课讲到的如果避免动画重复的问题(JQuery Chapter3 HomeWork 的最后一题)!
$(function(){
var timeId=null;
$("#images").mouseover(function(){
timeId=setTimeout(function(){
$("#showImage").show();
},500);
}).mouseleave(function(){
//清楚计时器
clearTimeout(timeId);
$("#showImage").hide();
}).mousemove(function(e){
$("#showImage").css({"left":e.pageX+5,"top":e.pageY+5});
});
});
//-----------------------------------------------------------
这样写就避免了重复动画的效果了!
<!--
Author:Lovingshu's Forever
Date:2011-10-13 21:40
Remark:With JQuery We really write less but do more!!
-->
