jQuery中的事件与动画
-
本章目标
- 使用常用简单事件制作网页特效
- 使用鼠标事件制作主导航特效
- 使用hover( )方法制作下拉菜单特效
- 使用鼠标事件及动画制作页面特效
- 网页中的事件
和WinForm一样，在网页中的交互也是需要事件来实现的，例如tab切换效果，可以通过鼠标单击事件来实现
- jQuery中的事件
jQuery事件是对JavaScript事件的封装，常用事件分类
3.1 基础事件
鼠标事件
键盘事件
window事件
表单事件
3.2 复合事件
鼠标光标悬停
鼠标连续点击
- 鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件
- 鼠标事件方法的区别
- 键盘事件
用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件
- 键盘事件-2
示例： --以键盘事件为例，实现按键时特效
$("[type=password]").keyup(function () {
$("#events").append("keyup");
}).keydown(function (e) {
$("#events").append("keydown");
}).keypress(function () {
$("#events").append("keypress");
});
$(document).keydown(function (event) {
if (event.keyCode == "13") {
alert("确认要提交么？");
}
});
- 浏览器事件
语法：
$(selector).resize( );
调整窗口大小时，完成页面特效
-
绑定事件与移除事件
- 绑定事件
- 移除事件
- 绑定事件-2
语法：
bind(type,[data],fn);
绑定单个事件
同时绑定多个事件
- 绑定单个事件
使用绑定实现鼠标移至“我的当当”显示二级菜单
示例：
$(document).ready(function(){
$(".on").bind("mouseover",function(){
$(".topDown").show();
});
});
- 绑定多个事件
使用绑定多个事件实现“我的当当” 二级菜单的显示和隐藏
示例：
$(".top-m .on").bind({
mouseover:function(){
$(".topDown").show();
},
mouseout:function(){
$(".topDown").hide();
}
});
- 移除事件
移除事件使用unbind()方法
语法：
unbind([type],[fn])
提示：
当unbind()不带参数时，表示移除所绑定的全部事件
- Tab切换页面
示例：
$("#del").click(function(){
$("#nav li:first").unbind("click", content1)
});
-
复合事件
- hover( )方法
- toggle( )方法
- hover()方法
hover()方法相当于mouseover与mouseout事件的组合
语法：
hover(enter,leave);
示例：
$(".top-m .on").hover(function(){
$(".topDown").show();
},
function(){
$(".topDown").hide();
}
);
- toggle()方法2-1
toggle()方法用于模拟鼠标连续click事件
语法：
toggle(fn1,fn2,...,fnN);
示例：
$("input").toggle(
function(){$("body").css("background","#ff0000");},
function(){$("body").css("background","#00ff00");},
function(){$("body").css("background","#0000ff");}
)
- toggle()方法2-2
toggle()方法不带参数，与show( )和hide( )方法作用一样
语法：
toggleClass( )可以对样式进行切换
示例：
toggle( );
语法：
toggleClass(className);
示例：
$("input").click(function(){$("p").toggleClass("red");})
- 小结
toggle( )和toggleClass( )总结
toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件
toggle( )实现事件触发对象在显示和隐藏状态之间切换
toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换
- jQuery动画效果
jQuery提供了很多动画效果
控制元素显示与隐藏
改变元素的透明度
改变元素高度
自定义动画
- 控制元素的显示及隐藏
show() 控制元素的显示，hide( )控制元素的隐藏
语法：
$(selector).show([speed],[callback])
$(selector).hide([speed],[callback])
- 改变元素的透明度--（transparent、rgba）
fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
语法：
$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
- 改变元素的高度
slideDown() 可以使元素逐步延伸显示
slideUp()则使元素逐步缩短直至隐藏
语法：
$(selector).slideUp ([speed],[callback])
$(selector).slideDown ([speed],[callback])
$(document).ready(function() {
$("h2").click(function(){
$(".txt").slideUp("slow");
$(".txt").slideDown("slow");
});
});
- 自定义动画
语法：
$(selector). animate({params},speed,callback)
- 英雄难过棍子关
语法1：
else{$(".man").find("img").attr("src","images/stick_stand.png").css({"left":0}).hide();
$(".stick").removeClass("stickDown").width(0);//棍子变为初始
var oldL = $(".well-box").offset().left;
$(".well-box").animate({"left":-wellL+oldL},500,function(){//柱子移动
$(".man").find("img").show();
stop = false;//按钮不可以单击
});
} });
},600);}
语法2：
function moveMan(){
var stickW = $(".stick").width();//获取倒下棍子的长度
setTimeout(function(){
$(".man").find("img").attr("src","images/stick.gif");
$(".man").find("img").animate({"left":stickW+"px"},1000,function(){
var wellL = $(".well").eq(1).offset().left;//柱子距离屏幕左侧的距离
var well0 = $(".well").eq(0).offset().left;//柱子距离屏幕左侧的距离
colWidth= $(".well").eq(0).width();
var range = wellL-well0-colWidth;//获取两个柱子之间的距离
if( (stickW < range) || (stickW > wellL)){ //判断人物是否落下
$(".man").animate({"bottom":"0px"});
}
- 总结