为什么我的jQuery队列停止工作后执行一次
Why does my jQuery queue stop working after executing once?
好的,我的目标是制作一个简单的动画,当点击多米诺骨牌时,它从一堆的前面移动到后面。
我有一些工作在这里:http://jsfiddle.net/Kirkman/tDmHE/
但是这是由一系列嵌套的回调组成的,最终我将拥有比五个多米诺骨牌多得多的东西。因此,我了解到jQuery的队列可以帮助我保持代码整洁,而不必嵌套所有这些回调。
这是我想到的。但它只在你第一次点击时有效:http://jsfiddle.net/Kirkman/R7TmU/8/
我不明白的是为什么它不能工作的后续时间。
以下是相关的JS函数: function dominoSlide(theThis) {
$('#dominoes .nav ul li').removeClass('selected',500);
var thisDomino = theThis.parent();
$('#dominoes .nav ul').queue(function() {
thisDomino.switchClass('domino0','selected', 250);
$('.domino1').switchClass('domino1','domino0',10);
$('.domino2').switchClass('domino2','domino1',10);
$('.domino3').switchClass('domino3','domino2',10);
$('.domino4').switchClass('domino4','domino3',10);
thisDomino.addClass('domino4');
thisDomino.removeClass('selected',250);
resetHandlers();
});
}
function resetHandlers() {
$('#dominoes .nav ul li a').unbind();
$('.domino0 a').bind('click', function(event) {
var theThis = $(this);
dominoSlide(theThis);
event.preventDefault();
});
$('#dominoes .nav ul li:not(".domino0") a').bind('click', function(event) {
event.preventDefault();
});
}
<!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></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.16.min.js"></script>
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>-->
<script type="text/javascript">
$(document).ready(function () {
var dominoesHtml = $('.nav').clone().html();
$('.story div').hide();
$('.domino0 a').live('click', function (event) {
var obj = $(this).parent();
$('#dominoes .nav ul li').removeClass('selected', 500);
obj.switchClass('domino0', 'selected', 250);
$('.domino1').switchClass('domino1', 'domino0', 10);
$('.domino2').switchClass('domino2', 'domino1', 10);
$('.domino3').switchClass('domino3', 'domino2', 10);
$('.domino4').switchClass('domino4', 'domino3', 10);
obj.addClass('domino4');
obj.removeClass('selected', 250);
event.preventDefault();
});
$('button#btnReset').click(function () {
$('.nav').html(dominoesHtml);
});
});
</script>
<style type="text/css">
body
{
padding: 10px;
}
#dominoes
{
padding: 0px;
width: 620px;
position: relative;
background-color: #eee;
}
#dominoes .nav ul
{
list-style: none;
margin: 0px;
padding: 0px;
position: relative;
}
#dominoes .nav ul li
{
display: block;
position: absolute;
width: 113px;
top: 0px;
}
.domino0
{
left: 0px;
z-index: 1000;
}
.domino1
{
left: 30px;
z-index: 98;
}
.domino2
{
left: 60px;
z-index: 96;
}
.domino3
{
left: 90px;
z-index: 94;
}
.domino4
{
left: 120px;
z-index: 92;
}
.was0
{
background-color: red;
}
.was1
{
background-color: purple;
}
.was2
{
background-color: blue;
}
.was3
{
background-color: green;
}
.was4
{
background-color: yellow;
}
#dominoes .nav ul li.hovered
{
padding-left: 50px;
}
#dominoes .nav ul li.selected
{
left: 506px;
z-index: 1000;
}
.story
{
position: absolute;
top: 250px;
}
button
{
position: absolute;
top: 300px;
}
</style>
</head>
<body>
<div id="dominoes">
<div class="nav">
<ul>
<li class="domino0 was0"><a href="xxx">
<img src="http://dl.dropbox.com/u/27409695/images/domino.png" />q</a></li>
<li class="domino1 was1"><a href="xxx">
<img src="http://dl.dropbox.com/u/27409695/images/domino.png" />q</a></li>
<li class="domino2 was2"><a href="xxx">
<img src="http://dl.dropbox.com/u/27409695/images/domino.png" />q</a></li>
<li class="domino3 was3"><a href="xxx">
<img src="http://dl.dropbox.com/u/27409695/images/domino.png" />q</a></li>
<li class="domino4 was4"><a href="xxx">
<img src="http://dl.dropbox.com/u/27409695/images/domino.png" />q</a></li>
</ul>
</div>
<button id="btnReset">
Reset handlers
</button>
</div>
</body>
</html>
相关文章:
- If语句只执行一次
- JavaScript 只在 php 代码中执行一次
- 如果只有一次有条件,如何执行
- 是节点.js一次只执行一个上下文
- 就绪函数上的指令只能执行一次
- 如何在if循环中只执行一次
- Javascript执行一次
- Jquery on('单击')..函数只执行一次
- 如何在一次有条件的ng单击时执行多个调用
- 如何只执行一次ajaxStart和ajaxEnd
- 使用Greasemonkey每5秒执行一次Javascript
- 只执行一次jquery animate
- jQuery如果大于则执行操作,但只执行一次
- 制作一个$window.location.reload(true);在离子/角度中仅执行一次
- 正则表达式回调函数只执行一次
- 如何循环函数数组并在单击时一次执行一个
- 代码只执行一次,但应该继续执行
- Casper.start 的循环只执行一次
- 如何在一次点击(而不是整个点击)内执行一次操作
- 在一次执行中多次运行Jasmine Spec