PHP 和 jQuery 绘制数字动画

Question

我一直在开发一个抽牌程序。我有 54 张牌，我想单独抽取它们。这是我到目前为止所得到的。它读取一个数组，对其进行打乱，重置，然后将它们放在 foreach 中。

<?
session_start();
include "array.php";
shuffle($cards);
reset($cards);
$i = 1;
foreach($cards as $card){
print <<<HERE
  <div id="$i">\n<img src="img/{$card[1]}.gif" alt="{$card[0]}" width="176" height="276"/><br/>
  <h1 style="font-family: sans-serif;">{$card[0]}</h1>\n</div><br />\n\n
HERE;
  $i++;
}

?>

每张卡的每个结果如下:

<div id="1">
<img src="img/#.gif" alt="Card Name #" width="176" height="276"/><br/>
<h1 style="font-family: sans-serif;">Card Name #</h1>
</div><br />

在array.php中，有一个二维数组，保存每张卡的路径和名称。例如:

$array = array();
$array[] = array("Card Name 1", "1");
$array[] = array("Card Name 2", "2");
$array[] ...

无论如何，我是 jquery 的新手，我需要帮助创建一个动画，该动画显示一张卡片并按照其输出的顺序更改每次点击的图片，直到它用完为止。

如何制作这个动画？我需要完全更改我的代码才能完成此任务吗？有没有更简单的方法？

提前致谢!

Answer 1

有很多方法可以做到这一点，但这是我想到的第一个:

$(document).ready(function(){
    var i=0,
        $cards = $("div").hide();
    $cards.click(function(){
        $cards.eq(i).slideUp(function() {
            i = (i+1)%$cards.length;
            $cards.eq(i).slideDown();
        });
    }).eq(0).slideDown();
});

您应该为您的卡片 div 分配一个公共(public)类并更改 jQuery 选择器以使用它，例如 $("div.card") ，但总体思路是选择所有卡片 div 并隐藏它们，显示第一个，然后单击显示的卡片将其隐藏并显示下一个。

我已经对上面的代码进行了编码以保持循环，但您可以根据需要添加自己的甲板结束操作。

演示: http://jsfiddle.net/FrrhZ/

jQuery提供了多个animation methods ，你可以让动画变得尽可能复杂，但出于演示目的，我只是使用 .slideUp()和.slideDown() .

顺便说一下，我会删除 <br>各个 div 之间的元素。如果一次只显示一张卡片，则不需要它们，但即使要显示多张卡片，div 也是 block 元素，默认情况下会在另一张卡片下面显示一张卡片 - 如果您需要更多间距，请通过 CSS 设置边距，而不是添加间隔符元素。