PHP and jQuery Draw numbers animation

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!

nnnnnn · Accepted Answer · 2012-07-06 04:39:09Z

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.

edited Jul 6, 2012 at 4:39

answered Jul 6, 2012 at 4:33

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

slippery Over a year ago

Excellent answer! Just what I needed ;)

slippery Over a year ago

also, when I run this code, it works, yet every time I click, the next card goes down appx. 20px. How do I prevent this?

nnnnnn Over a year ago

You need to remove the br tags that you are outputting after each div (notice I already did this for my demo: compare the html from my demo with what your php outputs).

Ashwin Singh · Accepted Answer · 2012-07-06 04:37:18Z

1

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.

edited Jul 6, 2012 at 4:37

answered Jul 6, 2012 at 4:24

Ashwin Singh

7,3855 gold badges38 silver badges55 bronze badges

1 Comment

slippery Over a year ago

Your answer was great too. But I needed my cards to come up one at a time. +1

Collectives™ on Stack Overflow

PHP and jQuery Draw numbers animation

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related