Question

我试图编写一个JQuery版本的骰子游戏Yahtzee作为学习练习。要掷骰子，用户单击一个按钮，该按钮会触发处理整个掷骰子的功能。在这个过程中应该发生的事情是用户没有标记为＆＃34;锁定的任何骰子＆＃34;应该淡出（将css不透明度值设置为0），之后骰子被“滚动”，然后逐渐消失。

处理此过程的方法如下所示：

function rollHand() {

    for ( var count = 0; count <= 4; count++) {
        var roll = Math.floor(Math.random()*6) + 1;
        var myCell = $( //id of table cell containing current dice object );
        if ( //myCell isn't marked 'locked' ) {
                myCell.animate({ opacity: 0 }, 1000, function() {
                    // 'roll' dice
                });
            }
            myCell.animate({ opacity: 1 }, 1000);
        }
    }
}
else {
    // other stuff
}

}

有五个骰子在玩，所以这个功能循环五次。然而，骰子二，三和四从不淡入，最后的第五个骰子会改变它是否被标记为锁定。

有谁知道这里出了什么问题？如果我需要提供更多信息，请告诉我。

Answer 1

根据我的经验，我发现表格细胞充满了困难。我很好奇如果暂时将包含元素交换到DIV会产生不同的结果。

此外，您可以更改jQuery调用以设置＆＃34; dice＆＃34;的不透明度的动画。 TD内部的元素，而不是动画细胞本身。

Answer 2

您是否曾尝试使用fadeToggle()在ints回调中掷骰子？

if ( //myCell isn't marked 'locked' ) {
        myCell.fadeToggle(1000, function() {
            // 'roll' dice
        });
    }
}

Answer 3

如果骰子未被锁定，则您同时调用完全不透明度和空白不透明度。它可能会给你不一致的结果。如果我理解正确，您需要在隐藏动画完成后调用show动画。像这样。

function rollHand() {

    for ( var count = 0; count <= 4; count++) {
        var roll = Math.floor(Math.random()*6) + 1;
        var myCell = $( "id of table cell containing current dice object" );
        if ( !myCell.is(".locked") ) {
            // Roll dice
            // Start fade out
            myCell.animate({ opacity: 0 }, 1000, function() {
                // Dice is now hidden
                // Start fade in
                myCell.animate({ opacity: 1 }, 1000, function() {
                    // Dice is showing again
                });
            });
        } else {
            // Other stuff
        }
    }
}

JQuery淡出/出现动画问题：对象没有消失

3 个答案: