0

我一直在研究一个抽卡的程序。我有 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 的新手，我需要帮助来创建一个显示卡片的动画，并按照输出的顺序更改每次点击的图片，直到它用完为止。

我怎样才能创建这个动画？我需要完全改变我的代码来完成这个吗？有没有更简单的方法？

提前致谢！

4

2 回答 2

1

为您的每个单独的 div 设置不透明度 0 并给出 class="card"

然后使用这个功能

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

例如：http: //jsfiddle.net/FrrhZ/10/

$(".card") 是一个 jQuery 选择器，用于获取类“.card”的所有元素。上面将显示每张卡片从无到有，一个很酷的效果。这只是一个例子，你可以用 jQuery animate() 做更多的事情，看看http://api.jquery.com/animate/ 例如，你可以这样设置速度

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

或者，您可以显示类似地铁的动画，其中实体在出现时稍微向上，为此添加 margin-top:10px 和 opacity:0 到您的 div，然后使用此功能

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

例如：http: //jsfiddle.net/FrrhZ/14/

您可以使用 animate() 获得更多创意，这些只是 jQuery animate() 可能实现的众多功能中的一小部分，您甚至可以链接动画，所有内容都在链接中提供。继续探索。

于 2012-07-06T04:24:33.340 回答
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 分配一个公共类并更改 jQuery 选择器以使用它，例如 ，$("div.card")但一般的想法是选择所有卡片 div 并隐藏它们，显示第一个，然后单击显示的任何一个隐藏它和显示下一个。

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

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

jQuery 提供了许多动画方法，你可以让动画变得任意复杂，但出于演示目的，我只使用了.slideUp()and .slideDown()。

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

于 2012-07-06T04:33:36.503 回答