jQuery动画制作
事件的绑定
bind(type[,data],fn);
type:包括 blur/focus/load/resize/scroll/unload/click/dblclick/mousedown/error
mouseup/mousemove/mouseover/mouseout/mouseenter/mouseleave/change/select/submit/keydown/keypress/keyup等
还可以自定义名称
data:可选参数，作为event.data属性值传递给事件对象的额外数据对象
fn：用来绑定的处理函数
例子：
$("#panel h5.head").bind("click",function(){
var $content = $(this).next();
if($content.is(":visible")){
$content.hide();
}else{
$content.show();
}
}
)
也可以这样实现
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
});
$("#panel h5.head").bind("mouseout",function(){
$(this).next().hide();
})
合成事件
hover方法
hover(enter,leave);//用于模拟光标悬停事件，当光标移动到元素上时
会触发指定的函数enter；当光标移出这个元素时，会触发指定的第二个函数（leave）
注意：
在IE6里仅有超级链接才用伪类选择符，对于其他元素，可以使用JQuery的hover方法
hover方法准确来说是代替bind("mouseenter")和bind("mouseleave")
当需要触发hover函数的时候，第二个参数需要用trigger("mouseleave")来触发
toggle()
toggle(fn1,fn2,...fnN)//用于模仿鼠标连续单击事件，当第一次单击元素，触发fn1
当第二次单击元素，触发fn2，过了后再重新从第一个函数开始
还有一个另外的作用：切换元素的可见状态
如果元素是可见的，单击切换则为隐藏，反之亦然
针对上面的例子修改为：
$("#panel h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
$("#panel h5.head").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
$("#panel h5.head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
})
.highlight{ background:#FF3300; }
$("#panel h5.head").toggle(function(){
$(this).addClass("highlight");
$(this).next().show();
},function(){
$(this).removeClass("highlight");
$(this).next().hide();
});
事件冒泡
什么是冒泡？
页面上有多个事件，也可以多个元素响应同一个事件
假设页面上有两个元素，其中一个元素嵌套在另外一个元素里，并且都绑定了click事件，同时
元素也绑定了click事件
外层div元素
内层span元素
外层div元素
// 为span元素绑定click事件
$('span').bind("click",function(){
var txt = $('#msg').html() + "
内层span元素被点击.
";$('#msg').html(txt);
});
// 为div元素绑定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "
外层div元素被点击.
";$('#msg').html(txt);
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "
body元素被点击.
";$('#msg').html(txt);
});
当点击内部元素，触发元素的cick事件时，会输出三条记录
而这个就是由事件冒泡引起的
引发事件顺序“冒泡”
(1)
(2)
(3)
因为事件会按照DOM层次结构像水泡一样不断向上直至顶端，所以称为冒泡
停止冒泡的方法如下：
$('span').bind("click",function(event){
var txt = $('#msg').html() + "
内层span元素被点击.
";$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
阻止默认行为
什么叫默认行为？
网页中的元素有自己默认的行为，例如，单击超链接后会跳转、单击提交按钮后表单会提交
而有时需要阻止默认行为的执行
阻止提交按钮
$("#sub").bind("click",function(event){
var username = $("#username").val(); //获取元素的值
if(username==""){ //判断值是否为空
$("#msg").html("
文本框的值不能为空.
"); //提示信息event.preventDefault(); //阻止默认行为 ( 表单提交 )
}
})
如果需要既屏蔽默认行为又屏蔽冒泡，则用return false 即可
事件捕获
事件捕获是从最上到最下的过程，Jquery不支持事件捕获，用原生的javascript即可
事件对象的属性
event.type()
$("a").click(function(event) {
alert(event.type);//获取事件类型
return false;//阻止链接跳转
});
event.preventDefault() //阻止默认行为
event.stopPropagation()//不允许事件冒泡
event.target()
$("a[href=http://google.com]").click(function(event) {
alert(event.target.href);//获取触发事件的元素的href属性值
return false;//阻止链接跳转
});
event.relatedTarget()
event.pageX()
$("a").click(function(event) {
alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标
return false;//阻止链接跳转
});
e.which()
$("a").mousedown(function(e){
alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
return false;//阻止链接跳转
});
$("input").keyup(function(e){
alert(e.which);//得到输入框内的asciii码
})
e.metaKey
$("input").keyup(function(e){
alert(e.metaKey +" "+e.ctrlKey );
$(this).blur();
})
event.originalEvent()
指向原始的事件对象
移除事件
unbind([type][,data]);
type为事件类型
data为将要移除的函数
如果没有参数，则删除所有绑定的事件
如果提供了事件类型作为参数，则只删除该类型的绑定事件
例子：
$('#btn').unbind("click");})
$('#btn').bind("click", myFun1 = function(){ $('#test').append("
我的绑定函数1
"); }).$('#test').append("
我的绑定函数1
");});$('#delTwo').click(function(){
$('#btn').unbind("click",myFun2);
});
$('#btn').one("click", myFun1 = function(){//只有第一次单击才有效，第二次无效 $('#test').append("
我的绑定函数1
");}).$('#test').append("
我的绑定函数1
");});模拟操作
1.常用模拟
$('#btn').trigger("click");//自动触发btn的click事件
2.触发自定义事件
$('#btn').bind("myClick", function(){
$('#test').append("
我的自定义事件.
");});
$('#btn').click(function(){
$(this).trigger("myClick");
}).trigger("myClick");
$('#btn').bind("myClick", function(event, message1, message2){
$('#test').append( "
"+message1 + message2 +"
");});
$('#btn').click(function(){
$(this).trigger("myClick",["我的自定义","事件"]);
}).trigger("myClick",["我的自定义","事件"]);//给自定义事件传递参数
3.执行默认操作
$('#old').bind("click", function(){
$("input").trigger("focus"); //触发input元素的focus事件，也会使input获取输入焦点
});
$('#new').bind("click", function(){
$("input").triggerHandler("focus");仅仅触发input元素的focus事件
});
$("input").focus(function(){
$("body").append("
focus.
");})4.绑定多个事件类型
$(function(){
$("div").bind("mouseover mouseout",fuction(){$(this).toggleClass("over");})
});
5.添加事件命名空间，便于管理
$(function(){ $("div").bind("click.plugin",function(){
$("body").append("
click事件
"); });$("div").bind("mouseover.plugin", function(){
$("body").append("
mouseover事件
");});
$("div").bind("dblclick", function(){
$("body").append("
dblclick事件
");});
$("button").click(function() {
$("div").unbind(".plugin");
})
})
6.相当事件名称，不同命名空间执行方法
$(function(){ $("div").bind("click",function(){
$("body").append("
click事件
");});
$("div").bind("click.plugin", function(){
$("body").append("
click.plugin事件
");});
$("button").click(function() {
$("div").trigger("click!"); // 注意click后面的感叹号匹配所有不包含在命名空间中的命名方法
});
})
而如果都要被触发，可以写为 $("div").trigger("click");
动画
注意：用jquery做动画效果必须在文件头部包含如下的DTD定义，否则可能会引起动画的抖动
Jquery任何动画效果都可以指定三种速度参数，slow(0.6秒) normal(0.4秒) fast(0.2秒)
1.show()和hide()方法//改变的是元素的display属性
$("#panel h5.head").toggle(function(){
$(this).next().hide(600);
},function(){
$(this).next().show(600);//600可以写为slow(600秒内完成)/normal(400秒内完成)/fast(200秒内完成)
})
2.fadeOut()和fadeIn()//改变元素的透明度，直到dispaly为none或者为block为止
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().fadeOut();
},function(){
$(this).next().fadeIn();//
})
})
3.slideUp()和slideDown()//改变元素的高度
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().slideUp();
},function(){
$(this).next().slideDown();//当遇到一个display为none时，方法会将元素由上至下延伸显示
})
})
4.自定义动画方法
animated (params,speed,callback);
params:一个包含样式属性及值的映射，比如{property1:"value1",peroperty2:"value2",...}
speed ：速度参数
callback:在动画完成时执行的参数，可选
1.例子：
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}//前提是必须设置为position: relative;或者为
absolute
$(function(){
$("#panel").click(function(){
$(this).animate({left: "500px"}, 3000);
})
})
2.累加累减动画
上面的也可以写为
$(this).animate({left: "+=500px"}, 3000);
$(this).animate({left: "-=500px"}, 3000);
3.多重动画
(1)同时执行多个动画
$(this).animate({left: "500px",height:"200px"}, 3000);//既向右滑动，并且放大元素的高度
(2)按顺序执行多个动画
$(function(){
$("#panel").click(function(){
$(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");
});
});
$("#panel").click(function(){
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
.animate({top: "200px" , width :"200px"}, 3000 ,function(){
$(this).css("border","5px solid blue");
})
});
注意:假如把css方法放到第一个参数后面，将导致动画一开始就执行CSS方法，因为CSS方法不参与动画队列
停止动画
stop方法
stop([clearQueue][,gotoEnd])
clearQueue和gotoEnd都是可选参数
clearQueue:是否要清空未执行完的动画队列
gotoEnd:是否直接将正在执行的动画跳转到末状态
stop(true,true)//停止当前动画并直接到达当前动画的末状态并清空动画队列
2.判断元素是否处于动画状态
要避免动画累积而导致的动画于行为的不一致。
if (!$(element).is(":animated"))//判断元素是否正处于动画状态
{
//如果当前没有进行动画，则添加新动画
3.其他动画方法
toggle() //切换元素的可见状态
slideToggle()//通过高度变化来切换匹配元素的可见性
fadeTo()
}
实例：
海贼王
播放:28,276海贼王
播放:28,276海贼王
播放:28,276海贼王
播放:28,276
哆啦A梦
播放:33,326哆啦A梦
播放:33,326哆啦A梦
播放:33,326哆啦A梦
播放:33,326
火影忍者
播放:28,276火影忍者
播放:28,276火影忍者
播放:28,276火影忍者
播放:28,276
龙珠
播放 57,865龙珠
播放 57,865龙珠
播放 57,865龙珠
播放 57,865
* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#2B93D2; text-decoration:none; }
a:hover { color:#E31E1C; text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
/* v_show style */
.v_show { width:595px; margin:20px 0 1px 60px; }
.v_caption { height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat 0 0; }
.v_caption h2 { float:left; width:84px; height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px; }
.v_caption .cartoon { background-position: 0 -100px; }
.v_caption .variety { background-position:-100px -100px; }
.highlight_tip { display:inline; float:left; margin:14px 0 0 10px; }
.highlight_tip span { display:inline; float:left; width:7px; height:7px; overflow:hidden; margin:0 2px; background:url(img/btn_cartoon.gif) no-repeat 0 -320px; text-
indent:-9999px; }
.highlight_tip .current { background-position:0 -220px; }
.change_btn { float:left; margin:7px 0 0 10px; }
.change_btn span { display:block; float:left; width:30px; height:23px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px;
cursor:pointer; }
.change_btn .prev { background-position:0 -400px; }
.change_btn .next { width:31px; background-position:-30px -400px; }
.v_caption em { display:inline; float:right; margin:10px 12px 0 0; font-family:simsun; }
.v_content { position:relative; width:592px; height:160px; overflow:hidden; border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid
#E7E7E7; }
.v_content_list { position:absolute; width:2500px;top:0px; left:0px; }
.v_content ul {float:left;}
.v_content ul li { display:inline; float:left; margin:10px 2px 0; padding:8px; background:url(img/v_bg.gif) no-repeat; }
.v_content ul li a { display:block; width:128px; height:80px; overflow:hidden; }
.v_content ul li img { width:128px; height:96px; }
.v_content ul li h4 { width:128px; height:18px; overflow:hidden; margin-top:12px; font-weight:normal; }
.v_content ul li h4 a { display:inline !important; height:auto !important; }
.v_content ul li span { color:#666; }
.v_content ul li em { color:#888; font-family:Verdana; font-size:0.9em; }