PHP和jQuery绘制数字动画

我一直在做一个抽牌的程序。我有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++;
}

?>

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

如何创建此动画？我是否需要完全更改代码才能完成此任务？有更简单的方法吗

---

提前谢谢

为您的每个div设置不透明度0，并给出class=“card”

然后使用这个函数

$(document).ready(function()
{
    $(".card").animate({opacity:"1"});
});

$(document).ready(function anim()
    {
        $(".card").animate({opacity:"1", marginTop:"0px"}, 'slow');//animate also excepts some keywords for speed like 'slow', 'fast'
    });

例：

$（“.card”）是一个jQuery选择器，用于获取类为“.card”的所有元素。上面会显示每张卡片不知从何处出现，一种很酷的效果。 这只是一个例子，您可以用jQuery animate（）做更多的事情，看看 例如，可以这样设置速度

  $(".card").animate({opacity:"1"}, 1000);//animation to be completed in 1000 miliseconds.

或者，您可以显示一个类似metro的动画，其中实体在显示时稍微向上移动，为此，在divs中添加margin top:10px和opacity:0，然后使用此功能

$(document).ready(function()
{
    $(".card").animate({opacity:"1"});
});

$(document).ready(function anim()
    {
        $(".card").animate({opacity:"1", marginTop:"0px"}, 'slow');//animate also excepts some keywords for speed like 'slow', 'fast'
    });

例：

---

您可以使用animate（）获得更多的创意，这只是jQuery animate（）可能实现的许多事情中的一小部分，您甚至可以链接动画，链接中提供了所有内容。继续探索。

有很多方法可以做到这一点，但首先想到的是：

$(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分配一个公共类，并更改jQuery选择器以使用它，例如，

$（“div.card”）

，但总体思路是选择所有卡div并隐藏它们，显示第一个，然后单击显示的卡div并显示下一个

我对上面的代码进行了编码，以保持循环，但您可以根据需要添加自己的甲板末端动作

演示：

jQuery提供了许多功能，您可以随意制作动画，但出于演示目的，我只使用了

.slideUp（）

和

.slideDown（）

---

顺便说一下，我将从您的各个div之间删除

元素。如果一次只显示一张卡，则不需要它们，但即使要显示多张卡，div也是块元素，默认情况下会在另一张卡下显示一个div-如果需要更大的间距，请通过CSS设置边距，而不是添加间隔元素。

您的答案也很好。但是我需要我的卡片一次一张地出现+1回答得很好！正是我需要的；）另外，当我运行这段代码时，它是有效的，但每次我单击，下一张卡就会转到appx。20像素。如何防止这种情况发生？您需要删除在每个div之后输出的br标记（注意，我已经在演示中这样做了：将演示中的html与php输出的内容进行比较）。