为什么我的 jQuery 队列执行一次后停止工作？答案

【问题标题】：Why does my jQuery queue stop working after executing once?为什么我的 jQuery 队列执行一次后停止工作？
【发布时间】：2011-09-15 23:51:29
【问题描述】：

好的，所以我的目标是制作一个简单的动画，当点击多米诺骨牌时，多米诺骨牌会从一堆前面移动到后面。

我有一些东西在这里工作：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();
        });

    }

【问题讨论】：

请在问题本身中包含您需要帮助的实际代码。
你使用 jQuery 1.3 有什么原因吗？
这是我的疏忽。它应该是 1.4.2，这是最终将实施的网站上使用的版本。
之前有人发布了一个答案，建议我使用 .live() 而不是 .bind()，但在我做出回应之前，该答案很快就被删除了。只想说这个答案几乎是正确的。我现在有我的代码工作。在这里查看：jsfiddle.net/Kirkman/aW4t7
另一件事：我使用上面的 resetHandlers() 结构的原因是为了只允许单击第一个多米诺骨牌。使用 .live() 而不是 .bind()，然后用 if ( !$('ul li').is(':animated') ) { 包装 .click 事件处理程序完成了我想要的更好的事情。您可以在此评论正上方的 jsfiddle 链接上看到这一点。

标签： javascript jquery jquery-ui animation queue

【解决方案1】：

<!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>

【讨论】：