Jquery学习（effect 简单的特效）
2014-06-28 16:19
274 查看
toggle() 函数：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1.toggle() - 曹鹏Jquery(Javascript)</title>
<script src="../jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(e) {
$("button").click(function () {
$("p").toggle(1000);
});
});
</script>
<style>
.red{ background:#F06;}
.green{ background:#0C6;}
p {font-weight:bold; font-size:16px;}
</style>
</head>
<body>
<span style="white-space:pre"> </span><button>Toggle 'em</button>
<p class="green">曹鹏说过</p>
<p class="red">学习是一种能力 知识是一种思想</p>
<p class="green">曹鹏说过</p>
<p class="red">传奇 传奇 传出来的 都是普通人</p>
<p class="green">曹鹏说过</p>
<p class="red">独孤求败和至尊是同义词 是在告诉你学会享受孤单是多么的重要</p>
<p class="green">曹鹏说过</p>
<p class="red">如果你曾经体会过登峰造极的感受 你就不会退而求其次</p>
<p class="green">曹鹏说过</p>
<p class="red">经验瞬间可以复制 而知识 有用的知识 成功积累过程至少是一个DECADE</p>
</body>
</html>
toggle() 参数可以是slow、fast ，也可以是一些具体的数值：1000，单位是毫秒ms。
<script src="../jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(e) {
$("button").click(function () {
$("p").toggle(1000);
});
});
</script>
效果图：点击按钮会收回段落文字，再点击段落文字会展开。
show() hide() 显示、隐藏：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2.showhide() - 曹鹏Jquery(Javascript)</title>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function() { $("#show").click(function() { $("#CAOPENG").show(4000); }); $("#hide").click(function() { $("#CAOPENG").hide("normal"); }); $("#toggle").click(function() { $("#CAOPENG").toggle("slow"); }); }); </script>
<style type="text/css">
div#CAOPENG {
width: 300px;
height: 220px;
margin: 10px;
padding: 20px;
background-color:#C9C;
border: 2px outset #690;
cursor: pointer;}
p, span {font-size: 16pt;}
button {margin: 5px;}
</style>
</head>
<body>
<p></p>
<div id="CAOPENG">
</div>
<button id="show">Show</button>
<button id="hide">Hide</button>
<button id="toggle">Toggle</button>
</body>
</html>show 显示；hide 隐藏；toggle 在这两种状态之间进行切换。
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("#show").click(function() {
$("#CAOPENG").show(4000);
});
$("#hide").click(function() {
$("#CAOPENG").hide("normal");
});
$("#toggle").click(function() {
$("#CAOPENG").toggle("slow");
});
});
</script>
sliding：滑动（slideUp 向上滑、slideDown 向下滑、slideToggle 在这两种状态之间进行切换）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3.sliding() - 曹鹏Jquery(Javascript)</title>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("#slideup").click(function() {
$("#CAOPENG").slideUp("normal");
});
$("#slidedown").click(function() {
$("#CAOPENG").slideDown("normal");
});
$("#toggle").click(function() {
$("#CAOPENG").slideToggle("slow");
});
});
</script>
<style type="text/css">
div#CAOPENG {
width: 300px;
height: 220px;
margin: 10px;
padding: 20px;
background-color:#C9C;
border: 2px outset #690;
cursor: pointer;
}
p, span {
font-size: 16pt;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<p>
</p>
<div id="CAOPENG">
</div>
<button id="slideup">Slide Up</button>
<button id="slidedown">Slide Down</button>
<button id="toggle">Toggle Slide</button>
</body>
</html>
fade：［fadeIn(速度) 淡入，fadeOut(速度) 淡出，fadeTo(速度,透明程度) 渐变到什么程度］
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>4.fade() - 曹鹏Jquery(Javascript)</title>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("#fadein").click(function() {
$("#CAOPENG").fadeIn("normal");
});
$("#fadeout").click(function() {
$("#CAOPENG").fadeOut("normal");
});
$("#fadeto3").click(function() {
$("#CAOPENG").fadeTo("slow", 0.3);
});
$("#fadeup").click(function() {
$("#CAOPENG").fadeTo("slow", 1.0);
});
});
</script>
<style type="text/css">
div#CAOPENG {
width: 300px;
height: 220px;
margin: 10px;
padding: 20px;
background-color:#C9C;
border: 2px outset #690;
cursor: pointer;
}
p, span {
font-size: 16pt;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<p>
</p>
<div id="CAOPENG">
</div>
<button id="fadein">Fade In</button>
<button id="fadeout">Fade Out</button>
<button id="fadeto3">Fade To .3</button>
<button id="fadeup">Fade To 1.0</button>
</body>
</html>
animate() 函数：动态的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>5.animating()1 - 曹鹏Jquery(Javascript)</title>
<script src="../jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(e) {
$("#ORG").click(function(){
$("#CAOPENG").animate({
width: "70%",
opacity: 0.8,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 3000 );
});
});
</script>
<style>
div {
margin:25px;
background-color: #FCC;
width:100px;
border:3px dashed #069;
}
</style>
</head>
<body>
<button id="ORG"><img src="images/logo.png"></button>
<div id="CAOPENG">曹鹏 编程之邦!</div>
</body>
</html>
animate 第二种用法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>6.animating()2 - 曹鹏Jquery(Javascript)</title>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("#right").click(function() {
$("#WS").animate({ width: "500px" }, 1000);
});
$("#text").click(function() {
$("#WS").animate({ fontSize: "48pt" }, 1000);
});
$("#toggle").click(function() {
$("#WS").animate({ left: "500" }, 1000, "swing");
});
});
</script>
<style type="text/css">
div#WS {
position:relative;
width: 250px;
height: 180px;
margin: 10px;
padding: 20px;
background: #669;
border: 1px solid #306;
color: #9F3;
cursor: pointer;
}
p, span {
font-size: 24pt;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<p> </p>
<div id="WS">CAOPENG.WS</div>
<button id="right">往右</button>
<button id="text">字体变大</button>
<button id="toggle">移动 CAOPENG.WS</button>
</body>
</html>
stop 停止（+= 递增，在现有基础上再往右走多少像素；-=递减，在现有基础上像左移动多少像素。）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>7.stop() - 曹鹏Jquery(Javascript)</title>
<script src="../jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(e) {
$("#go").click(function(){
$(".DunDun").animate({left: '+=200px'}, 2000);
});
$("#stop").click(function(){
$(".DunDun").stop();
});
$("#back").click(function(){
$(".DunDun").animate({left: '-=200px'}, 2000);
});
});
</script>
<style>
div {
position: absolute;
left: 0px;
top:50px;
width: 250px;
height: 157px;
margin: 25px;
}
</style>
</head>
<body>
<button id="go">顿顿，往右走</button>
<button id="stop">顿顿，停!</button>
<button id="back">顿顿，往左走</button>
<div class="DunDun"><img src="images/dundun.jpg"></div>
</body>
</html>
animate() [+= 递增，在现有基础上再往右走多少像素；-=递减，在现有基础上像左移动多少像素。]、stop()。
<script src="../jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(e) {
$("#go").click(function(){
$(".DunDun").animate({left: '+=200px'}, 2000);
});
$("#stop").click(function(){
$(".DunDun").stop();
});
$("#back").click(function(){
$(".DunDun").animate({left: '-=200px'}, 2000);
});
});
</script>
效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 最简单的jQuery程序 入门者学习
- jquery之超简单的div显示和隐藏特效demo
- JQuery Tabs 学习——简单切换
- jquery之超简单的div显示和隐藏特效demo
- JQuery学习笔录 简单的JQuery
- jquery之超简单的div显示和隐藏特效demo
- 学习JQUERY,写的简单下拉菜单！
- jquery之超简单的div显示和隐藏特效demo
- 10个经典而简单的jQuery特效设计在线演示
- 分享下载 23 款简单常用的web前端jquery网页特效
- jquery之超简单的div显示和隐藏特效demo
- jQuery 语法简单介绍和入门学习
- jQuery 语法简单介绍和入门学习
- learning jQuery 学习笔记四（+jQuery 1.4.1 API）--简单的事件
- jquery学习笔记(1)-----简单导航栏
- 学习jQuery之旅--让Ajax变的更简单
- jQuery 语法简单介绍和入门学习
- jquery之超简单的div显示和隐藏特效demo
- jQuery学习笔记之制作动画与特效
- cocos2d-x学习笔记(9)--effect(特效)