好吧,所以我的目标是制作一个简单的动画,当点击时,多米诺骨牌从一堆的前面移动到后面。
我有一些适用于此的内容: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();
});
}
答案 0 :(得分:0)
<!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>