JQUERY实例代码—队列

最新推荐文章于 2025-08-06 16:42:26 发布

weixin_30566149

最新推荐文章于 2025-08-06 16:42:26 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/dalonghahaha/archive/2010/08/13/1798688.html

代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>队列</title>
<style type="text/css">
div
{
margin: 3px;
width: 40px;
height: 40px;
background: green;
display:none;
}
div.newcolor
{
background: blue;
}
</style>
<script type="text/javascript" src="../JS/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#queue").click(function () {
$("div").show("slow");
$("div").animate({ left: '+=200' }, 2000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({ left: '-=200' }, 500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});

$("#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").queue("fx", []);
$("div").stop();
});
})

</script>
</head>
<body>
<button id="queue">Click here...</button>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/dalonghahaha/archive/2010/08/13/1798688.html