###Event Simulation
-
Simulate an event that triggers an element
-
Format: element object.trigger("event name");
$(“input”).trigger(“click”);
###Mouse in and out event merge hover
- Combine the mouse in and out events
into one.//Add the mouse in and out merge event to the element
$("div").hover(function(){ //Execute when the mouse is moved in $(this).css("color" ,"Red"); },function(){ //Execute when the mouse is moved out $(this).css("color","green"); }); ###Animation related
- Hide element object.hide(time, method);
- Display element object.show(time, method);
- Fade out the element object. fadeOut(time, method);
- Fade in the element object.fadeIn(time, method);
- Slide up element object. slideUp(time, method);
- Slide down element object. slideDown(time, method);
- Custom element object. animate({"style name": "value"}, time);
Exercise
1. Carousel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div,img{
width: 400px;
height: 250px;
}
div{
position: relative;/* 参照物 */
overflow: hidden;
}
img{
position: absolute;
}
</style>
</head>
<body>
<div>
<img src="img/1.jpg" >
<img src="img/2.jpg" >
<img src="img/3.jpg" >
<img src="img/4.jpg" >
</div>
<script src="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//得到所有图片遍历 i代表数组遍历时的下标
$("img").each(function(i){
//this代表当前遍历的数据中的js对象 0*400 1*400 2*400
$(this).css("left",i*400);
})
//开启定时器移动图片
setInterval(function(){
//得到所有图片并且遍历
$("img").each(function(){
//得到图片当前的left值 parseInt把px去掉 10px->10
var left = parseInt($(this).css("left"));
//让left值减少
left-=1;
//判断图片是否移出div
if(left<=-400){
//让当前图的位置移动到最后面
left=1200;
}
//再把减少后的left值赋值给元素
$(this).css("left",left+"px");
})
},10)
</script>
</body>
</html>
2.hover event
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>刘备</div>
<div>关羽</div>
<div>张飞</div>
<input type="button" value="按钮" onclick="alert('xxx')">
<script src="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//给元素添加鼠标移入移出合并事件
$("div").hover(function(){
//鼠标移入时执行
$(this).css("color","red");
},function(){
//鼠标移出时执行
$(this).css("color","green");
});
setTimeout(function(){
//事件模拟 参数为事件名称(没有on)
$("input").trigger("click");
},3000);
</script>
</body>
</html>
3. Animation related
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
width: 280px;
height: 350px;
}
</style>
</head>
<body>
<input type="button" value="隐藏" />
<input type="button" value="显示" />
<input type="button" value="淡出" />
<input type="button" value="淡入" />
<input type="button" value="上滑" />
<input type="button" value="下滑" />
<input type="button" value="自定义" />
<hr>
<img src="../zombimgs/0.jpg" >
<script src="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("input:eq(0)").click(function(){
//隐藏 时间后面的参数是动画完成后执行的
$("img").hide(2000,function(){
alert("隐藏完毕");
});
})
$("input:eq(1)").click(function(){
$("img").show(2000);
})
$("input:eq(2)").click(function(){
$("img").fadeOut(2000);//淡出
})
$("input:eq(3)").click(function(){
$("img").fadeIn(2000);//淡入
})
$("input:eq(4)").click(function(){
$("img").slideUp(2000);//上滑
})
$("input:eq(5)").click(function(){
$("img").slideDown(2000);//下滑
})
$("input:eq(6)").click(function(){
//修改元素的显示方式为相对定位
$("img").css("position","relative");
//设置自定义动画
$("img").animate({
"left":"200px"},1000)
.animate({
"top":"200px"},1000)
.animate({
"left":"0px"},1000)
.animate({
"top":"0px"},1000)
.animate({
"width":"520px","height":"630px"},1000)
.animate({
"width":"280px","height":"350px"},1000)
.fadeOut(1000,function(){
;
});
});
</script>
</body>
</html>
