Tutorial: How to make your own shuffle effect with jQuery

i think after you have read most of my effect tutorial on jQuery, you will notice that effect is just playing around with CSS. Nonetheless, without jQuery help using pure JavaScript to achieve the same result will really take a lot of time than the usually time we spend on jQuery. Anyway, back to the topic that i am going to write. In this tutorial, i will demonstrate another very simple concept to shuffle your containers or images. I believe this should be the last effect available in the market currently. Most of the effect i should have covered them up.

Tutorial

i find this way of writing tutorial is easy for me to understand and its much more neat and clearer compare to my other tutorial which is quite a mess. So i will continue using such structure to write my tutorial as much as possible. If you have any feedback or improvement that i can make, please send me an email or just leave a comment. =)

Concept

Let's imagine you have a set of poker card. The poker cards should be shown on the screen in a z-axis way. When we shuffle, we take the highest card, pull it out and placed at the back (Sound like a first in last out concept to me). Let's assume each container is a card. We will have to stack the card together in a z-axis row in order to simulate the pattern of a poker card deck. Well, since its programming we can really just have 2 containers and placed the image on the second level so that when the first image is being shuffled down, the second level image is being displayed during the shuffling of the first card. But let's not do such complex stuff, we are doing a simple tutorial right? Opps.

CSS

from the description in the concept section, the necessary and required CSS rule to apply on the containers are most probably something that can help us stack n containers together. Below listed the approximate rule required for shuffle effect to work.

• position: absolute - so that every container in the deck has a MUST obey position
• z-index: x - so that every element is being position in an z-axis level
• top: x em - the vertical position of the container
• left: x em - the horizontal position of the container
• float: left - we float all element so that they are no longer on the ground

where x is an integer value. Please take note that if you do not provide a type for your top and left, it may post a problem later when you try to shuffle your containers. Another thing to take note, z-index don't take in types like em or px, it is a pure number without type.

HTML

with the CSS rule declared, its time to setup our structure for each container. The structure of the container is fairly easy to setup. We just need a set of n containers in order to display different container during shuffling.

Coding

This part always get a bit confusing when there are piece and pieces of code flying around the place. But i will try my best to explain what is happening in here.

On the HTML page, i have allocated the following containers as describe above.

<div class='card' id='box1'></div>
<div class='card' id='box2'></div>
<div class='card' id='box3'></div>
<div class='card' id='box4'></div>

On the CSS external script, the amount of code required is also smaller compare to other tutorial since there is only 1 type of container we are dealing in this tutorial. The stylesheet is as follow,

div.card
{
width: 25em;                    /* width of each container*/
height: 20em;                    /* height of each container*/
position: absolute;                /* instructure each container to obey the position absolutely*/
float: left;                    /* float all the container so that they overlapped each other*/
left: 34%;                        /* align them to the center of the screen */
border: #000 solid 10px;        /* give it a border to make it look nice*/
}

div#box1
{
background-color: #66A666;/*green*/
}
div#box2
{
background-color: #E37373;/*pink*/
}
div#box3
{
background-color: #B2B2B2;/*grey*/
}
div#box4
{
background-color: #A51515;/*red*/
}

There is something interesting in here that you might want to know, when we set position of a div tag, the z-index property is being set to auto in default. Thus, the last container in our example(box4) will be the one display on the top of the stack. Unless we overwrite the z-index css properly. This is what we will see after we have our structure and CSS done.

IT IS JUST A BOX! Definitely, this is a box alright. Other containers are behind the container shown on the image. Notice that the last container on the HTML structure is being displayed instead of the first container? This is the reason why z-index is important later when shuffling the containers.

Lastly, we will be on our way to tackle jQuery coding after we have complete the structure required for our shuffle effect.  So what i will be going to do is to attach an event handler on each container. Once the event is being triggered, we will animate the top object to the right and pull it back down the queue by setting it z-index to a lower value. The code is presented below,

$(function(){
var i = 0;
$('div.card').click(function(){
$(this)
.animate({left: 15+'%', marginTop: 2+'em'},500, 'easeOutBack',function(){i--;$(this).css('z-index', i)})
.animate({left: 38+'%', marginTop: 0+'em'},500, 'easeOutBack');
});
});

The code done as what i instructed. Igive a variable i to hold the current level of z-index. adding event handler to all of my elements, once an event occurs, i will move the call object to the left and bottom 2em with the easing ability of easeOutBack from the jQuery plugin made available by George.  After the animation has completed, i set the z-index of the container to a lower level and pull it back in with another animation. And this will give you a nice shuffle effect as shown in the demo. You can download the tutorial file at jquery-shuffle-effect

That is all i have for you in this tutorial hope you enjoy this! I sure did! Cheers~