[英]Why does my jQuery queue stop working after executing once?
Okay, so my goal is to make a simple animation where a domino moves from the front of a pile to the back, when it is clicked. 好的,所以我的目标是制作一个简单的动画,在单击该动画时,多米诺骨牌将从一堆的前面移到后面。
I have something that works here: http://jsfiddle.net/Kirkman/tDmHE/ 我在这里有一些有效的方法: http : //jsfiddle.net/Kirkman/tDmHE/
But this consists of big series of nested callbacks, and eventually I will have a lot more than five dominoes. 但这包括大量的嵌套回调,最终我将拥有不止五个多米诺骨牌。 So then I learned that jQuery's queue could help me keep my code cleaner and not have to nest all those callbacks.
因此,我了解到jQuery的队列可以帮助我保持代码更整洁,而不必嵌套所有这些回调。
Here's what I came up with. 这是我想出的。 But it only works the first time you click: http://jsfiddle.net/Kirkman/R7TmU/8/
但这仅在您首次单击时起作用: http : //jsfiddle.net/Kirkman/R7TmU/8/
What I cannot figure out is why it will not work subsequent times. 我无法弄清楚的是为什么它以后无法使用。
Here are the relevant JS functions: 以下是相关的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.