PHP and jQuery Draw numbers animation - php

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.

Answer 2

For your each individual div set opacity 0 and give class="card"
Then use this function
$(document).ready(function()
{
$(".card").animate({opacity:"1"});
});
Ex: http://jsfiddle.net/FrrhZ/10/
The $(".card") is a jQuery selector to get all elements with class ".card". The above will show each card appearing from nowhere, a cool effect.
This is just an example, you can do many more things with jQuery animate(), have a look http://api.jquery.com/animate/
For example, you can set the speed like this
$(".card").animate({opacity:"1"}, 1000);//animation to be completed in 1000 miliseconds.
Or you can show a metro like animation where the entity goes a little up while appearing, to do that add margin-top:10px and opacity:0 to your divs and then use this function
$(document).ready(function anim()
{
$(".card").animate({opacity:"1", marginTop:"0px"}, 'slow');//animate also excepts some keywords for speed like 'slow', 'fast'
});
Ex: http://jsfiddle.net/FrrhZ/14/
You can get even more creative with animate(), these were just few of many things possible with jQuery animate(), you can even chain animations, everything is provided in the link. Go ahead and explore.