Skip to content

Commit 57bf119

Browse files
coderpwh1024coderpwh1024
committed
update JQ animate
1 parent 435bfe3 commit 57bf119

12 files changed

+569
-146
lines changed

‎jquery/.idea/workspace.xml

Lines changed: 140 additions & 146 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jquery/ch4/8-其它用法/4-8-1事件类型多个.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2+
"http://www.w3.org/TR/html4/loose.dtd">
3+
<html>
4+
<head>
5+
<title>其他用法</title>
6+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
7+
<style>
8+
div{
9+
width:100px;
10+
height:50px;
11+
}
12+
.over{
13+
color:red;
14+
background:#888;
15+
}
16+
</style>
17+
<script src="../../scripts/jquery.js" type="text/javascript"></script>
18+
<script type="text/javascript">
19+
$(document).ready(function () {
20+
$("div").bind("mouseover mouseout",function () {
21+
$(this).toggleClass("over");
22+
})
23+
})
24+
25+
</script>
26+
</head>
27+
<body>
28+
<div> 滑入.</div>
29+
</body>
30+
</html>

‎jquery/ch4/8-其它用法/4-8-2事件命名空间, 便于管理.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<title></title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<style>
7+
div{width:100px;height:50px;background:#888;color:white;}
8+
</style>
9+
<script src="../../scripts/jquery.js" type="text/javascript"></script>
10+
<script type="text/javascript">
11+
$(function(){
12+
$("div").bind("click.plugin",function(){
13+
$("body").append("<p>click事件</p>");
14+
});
15+
$("div").bind("mouseover.plugin", function(){
16+
$("body").append("<p>mouseover事件</p>");
17+
});
18+
$("div").bind("dblclick", function(){
19+
$("body").append("<p>dblclick事件</p>");
20+
});
21+
$("button").click(function() {
22+
$("div").unbind(".plugin");
23+
})
24+
/*
25+
click,mouseover 事件被删除，
26+
*/
27+
})
28+
</script>
29+
</head>
30+
<body>
31+
<div>test.</div>
32+
<button >根据命名空间，删除事件</button>
33+
</body>
34+
</html>

‎jquery/ch4/8-其它用法/4-8-3相同事件名称,不同命名空间执行方法.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<title></title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<style>
7+
div{width:100px;height:50px;background:#888;color:white;}
8+
</style>
9+
<script src="../../scripts/jquery.js" type="text/javascript"></script>
10+
<script type="text/javascript">
11+
$(function(){
12+
$("div").bind("click",function(){
13+
$("body").append("<p>click事件</p>");
14+
});
15+
$("div").bind("click.plugin", function(){
16+
$("body").append("<p>click.plugin事件</p>");
17+
});
18+
$("button").click(function() {
19+
$("div").trigger("click!"); // 注意click后面的感叹号
20+
});
21+
})
22+
</script>
23+
</head>
24+
<body>
25+
<div >test.</div>
26+
<button >根据命名空间，触发事件</button>
27+
</body>
28+
</html>

‎jquery/ch4/9-动画/9-1(show和hide).html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2+
"http://www.w3.org/TR/html4/loose.dtd">
3+
<html>
4+
<head>
5+
<title>动画</title>
6+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
7+
<style type="text/css">
8+
*{margin:0;padding:0;}
9+
body { font-size: 13px; line-height: 130%; padding: 60px }
10+
#panel { width: 300px; border: 1px solid #0050D0 }
11+
.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
12+
.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }
13+
</style>
14+
<script src="../../scripts/jquery.js" type="text/javascript"></script>
15+
<script type="text/javascript">
16+
$(document).ready(function () {
17+
$("#panel h5.head").toggle(function () {
18+
19+
//$(this).next().hide(600); // 带有时间的隐藏
20+
// $(this).next().fadeOut(); // 淡出
21+
$(this).next().slideUp();
22+
23+
},function () {
24+
// $(this).next().show(600);
25+
26+
//$(this).next().fadeIn();
27+
$(this).next().slideDown();
28+
})
29+
})
30+
31+
</script>
32+
33+
</head>
34+
<body>
35+
<div id="panel">
36+
<h5 class="head">什么是jQuery?</h5>
37+
<div class="content">
38+
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
39+
</div>
40+
</div>
41+
</body>
42+
</html>

‎jquery/ch4/9-动画/9-12(判断是否动画).html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2+
"http://www.w3.org/TR/html4/loose.dtd">
3+
<html>
4+
<head>
5+
<title>Title</title>
6+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
7+
<style type="text/css">
8+
*{margin:0;padding:0;}
9+
body { padding: 60px }
10+
.panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
11+
</style>
12+
<script src="../../scripts/jquery.js" type="text/javascript"></script>
13+
<script type="text/javascript">
14+
$(document).ready(function () {
15+
16+
function animateIt() {
17+
$("#mover").slideToggle("slow",animateIt);
18+
}
19+
20+
function animateIt2() {
21+
$("#mover").fadeToggle("slow",animateIt2);
22+
}
23+
animateIt();
24+
25+
$("button").click(function () {
26+
if(!$("#mover").is(":animated")){
27+
$("#mover").fadeToggle("slow",animateIt2);
28+
}else{
29+
$("#mover").stop();
30+
}
31+
32+
})
33+
34+
35+
})
36+
37+
</script>
38+
39+
40+
</head>
41+
<body>
42+
<button>click </button>
43+
<div class="panel" id="mover"> 动画元素</div>
44+
</body>
45+
</html>

‎jquery/ch4/9-动画/9-13(延迟动画).html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2+
"http://www.w3.org/TR/html4/loose.dtd">
3+
<html>
4+
<head>
5+
<title>动画延迟</title>
6+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
7+
<style type="text/css">
8+
*{margin:0;padding:0;}
9+
body { padding: 60px }
10+
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
11+
</style>
12+
<script src="../../scripts/jquery.js" type="text/javascript"></script>
13+
<script type="text/javascript">
14+
$(document).ready(function () {
15+
16+
// delay(1000) 延迟下一个事件的
17+
18+
$("#panel").css("opacity","0.5"); // 设置不透明度
19+
$("#panel").click(function () {
20+
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000).delay(1000)
21+
.animate({top:"200px",width:"200px"}).delay(1000).fadeOut("slow");
22+
})
23+
})
24+
25+
</script>
26+
27+
</head>
28+
<body>
29+
<div id="panel"></div>
30+
</body>
31+
</html>

‎jquery/ch4/9-动画/9-14(toggle).html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2+
"http://www.w3.org/TR/html4/loose.dtd">
3+
<html>
4+
<head>
5+
<title>动画</title>
6+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
7+
<style type="text/css">
8+
*{margin:0;padding:0;}
9+
body { font-size: 13px; line-height: 130%; padding: 60px }
10+
#panel { width: 300px; border: 1px solid #0050D0 }
11+
.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
12+
.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }
13+
</style>
14+
<script src="../../scripts/jquery.js" type="text/javascript"></script>
15+
<script type="text/javascript">
16+
$(document).ready(function () {
17+
$("#panel h5.head").click(function () {
18+
19+
// 写法一：
20+
// $(this).next().toggle(1000);
21+
22+
// 写法二：
23+
// $(this).next().slideToggle(1000);
24+
25+
// fadeTo();
26+
// $(this).next().fadeTo(600, 0.2);
27+
$(this).next().fadeToggle();
28+
29+
30+
})
31+
})
32+
33+
</script>
34+
35+
36+
</head>
37+
<body>
38+
<div id="panel">
39+
<h5 class="head">什么是jQuery?</h5>
40+
<div class="content">
41+
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
42+
</div>
43+
</div>
44+
45+
46+
</body>
47+
</html>

‎jquery/ch4/9-动画/9-18(animate仿其他方法).html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<title>Panel</title>
6+
<style type="text/css">
7+
*{margin:0;padding:0;}
8+
body { font-size: 13px; line-height: 130%; padding: 60px }
9+
#panel { width: 300px; border: 1px solid #0050D0 }
10+
.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
11+
.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }
12+
</style>
13+
<script src="../../scripts/jquery.js" type="text/javascript"></script>
14+
<script type="text/javascript">
15+
$(function(){
16+
$("button:eq(0)").click(function () {
17+
$("div.content").hide().animate({ opacity : "1" } );
18+
});
19+
20+
$("button:eq(1)").click(function () {
21+
$("div.content").animate({height : "show" , width : "show" , opacity : "show" } , 600 );
22+
});
23+
24+
$("button:eq(2)").click(function () {
25+
$("div.content").animate({height : "show" } , 600 );
26+
});
27+
28+
$("button:eq(3)").click(function () {
29+
$("div.content").animate({ opacity : "show" } , 600 );
30+
});
31+
32+
$("button:eq(4)").click(function () {
33+
$("div.content").animate({ opacity : "0.2" } , 600 );
34+
});
35+
})
36+
</script>
37+
</head>
38+
<body>
39+
<button>隐藏元素并取消透明度</button>
40+
<button>用animate仿show()</button>
41+
<button>用animate仿slideDown()</button>
42+
<button>用animate仿fadeIn()</button>
43+
<button>用animate仿fadeTo()</button>
44+
45+
46+
47+
<div id="panel">
48+
<h5 class="head">什么是jQuery?</h5>
49+
<div class="content">
50+
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
51+
</div>
52+
</div>
53+
54+
55+
</body>
56+
</html>

‎jquery/ch4/9-动画/9-5(animate简单使用).html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2+
"http://www.w3.org/TR/html4/loose.dtd">
3+
<html>
4+
<head>
5+
<title>动画</title>
6+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
7+
<style type="text/css">
8+
*{margin:0;padding:0;}
9+
body { padding: 60px }
10+
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
11+
</style>
12+
<script src="../../scripts/jquery.js" type="text/javascript"></script>
13+
<script type="text/javascript">
14+
$(document).ready(function () {
15+
$("#panel").click(function () {
16+
17+
// $(this).animate({left:"500px"},3000); // 单重画
18+
19+
// 左下一起移动
20+
// $(this).animate({left:"500px",height:"200px"},3000); // 多重画
21+
22+
// 先向右移动完之后再向下移动
23+
$(this).animate({left:"500px"},3000).animate({height:"200px"},3000); // 多重画二
24+
25+
26+
})
27+
})
28+
29+
</script>
30+
</head>
31+
<body>
32+
<div id="panel"></div>
33+
</body>
34+
</html>

‎jquery/ch4/9-动画/9-8(综合动画).html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2+
"http://www.w3.org/TR/html4/loose.dtd">
3+
<html>
4+
<head>
5+
<title>动画</title>
6+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
7+
<style type="text/css">
8+
*{margin:0;padding:0;}
9+
body { padding: 60px }
10+
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
11+
</style>
12+
<script src="../../scripts/jquery.js" type="text/javascript"></script>
13+
<script type="text/javascript">
14+
$(document).ready(function () {
15+
$("#panel").css("opacity","0.5");
16+
$("#panel").click(function () {
17+
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"300px",width:"200px"},3000).fadeOut("slow");
18+
});
19+
})
20+
21+
</script>
22+
</head>
23+
<body>
24+
25+
<div id="panel"> </div>
26+
</body>
27+
</html>

0 commit comments

Comments
 (0)