Question

I’ve been working on a program to draw cards. I have 54 cards and I want to have them drawn individually. Here’s what I’ve gotten so far. It reads an array, shuffles it, resets it, and then places them with a 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++;
}

?>

Each result of each card comes out as this:

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

In array.php, there is a 2-dimensional array which holds the paths and names of each card. For example:

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

Anyways, I’m new at jquery and I need help into creating an animation which shows a card and changes the picture for every click in the order which it outputs until it runs out.

How can I create this animation? Do I need to change my code completely to accomplish this? Is there an easier method?

Thanks in advance!

Answer 1

There are lots of ways to do this, but here’s the first that came to mind:

$(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();
});

You should assign your card divs a common class and change the jQuery selector to use it, e.g., $("div.card"), but the general idea is select all the card divs and hide them, show the first, and on click of whichever one is showing hide it and show the next.

I’ve coded the above to keep looping around, but you can add your own end-of-deck actions as required.

Demo: http://jsfiddle.net/FrrhZ/

jQuery provides a number of animation methods, and you can make the animation as complicated as you like, but for demo purposes I just went with .slideUp() and .slideDown().

By the way, I’d remove the <br> elements from between your individual divs. You don’t need them if only one card is displayed at a time, but even to display multiple cards divs are block elements and will display one under then other by default – if you need more spacing set the margins via CSS rather than adding spacer elements.