菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
369
0

jquery1.4 教程三 新增方法教程

原创
05/13 14:22
阅读数 37012



[Ctrl+A 全选 注:如需引入外部js需刷新才能执行]


复制代码 代码如下:

<input name="" id="start" type="button" value="开始运行动画" />
<input name="" id="stop" type="button" value="终止动画" />
<div></div>
$(function(){
$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},1500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function () {
$("div").clearQueue();
$("div").stop();
});
})







jquery







[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]


复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>delay()</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
.second { background-color: #33f;}
</style>
</head>
<body>
<p><button>运行</button></p>
<div class="first"&gt编程客栈;</div>
<div class="second"></div>
<script>
$("button").click(function() {
$("div.first").slideUp(300).delay(800).fadeIn(400);
$("div.second").slideUp(300).fadeIn(400);
});
</script>
</body>
</html>






[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]


复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>detach()</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
&编程客栈lt;style>p { background:yellow; margin:6px 0; } p.off { background: black; }</style>
</head>
<body>
<button>添加/删除段落</button>
<p>这是一个用于测试的段落</p>
<script>
var p;
$("button").click(function(){
if (p) {
p.appendTo("body");
p = null;
} else {
p = $("p").detach();
}
});
</script>
</body>
</html>








[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]



























[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]




http://www.cppcns.com

















本文标题: jquery1.4 教程三 新增方法教程
本文地址: http://www.cppcns.com/wangluo/javascript/55053.html

发表评论

0/200
369 点赞
0 评论
收藏
为你推荐 换一批