Block Shuffling effect using jquery

Posted on June 8, 2008
Filed Under how-to, jquery, tutorial

Last time, I showed you how to navigate the content in various effect using jQuery. In this post, I’ll show you how can you generate the shuffle effect i.e one block moves under another block with sliding from the left.

LIVE DEMO

Now let’s look at the various code to perform this task.

HTML and CSS code for shuffling the block

This code is same as the the one I’ve shown you in the content navigation effect using jquery post. Please refer to that post to view the HTML and CSS code for detail. Note that, each link’s “href” attribute is pointing to the “id” element of the block.

JavaScript code in jQuery to shuffle the block

//when the anchor is clicked
$("a.linkclass").click(function()
{
   //check weather the visible block and clicked link's block is same or different
   if($(this).attr("href")!="#"+$(".msg_body:visible").attr("id"))
   {
      //reduces the z-index and margin of left side increased and decreased by 400px and hide
      $(".msg_body:visible").css("z-index","0").animate({marginLeft: "-=400px"},"500").animate({marginLeft: "+=400px"},"500").hide("1");
     //increase the z-index of the new visible block
     $($(this).attr("href")).css("z-index","10").fadeIn(400);
   }
}

When the anchor with the “linkclass” is clicked, first of all it is check that weather the clicked anchor’s link is same as the visible block. If it is the same then the animation doesn’t take place. When these are different, then the visible block’s “z-index” is decreased to zero and it gets slides to the left and then into right by using altering the value in the “margin-left” property. And, finally this block gets hidden. In the meanwhile, block whose name in the “href” attribute of the clicked anchor gets visible with fade in effect and “z-index” of this block is set to “10″ so that it overlaps the slided block.

Download Full Source Code

Popularity: 10% [?]

Follow me on twitter at http://twitter.com/roshanbh.

» How to make accordion menu using jquery
» Blink and bounce effect on image or object using jquery
» Flashing Alert Message Box using JQuery
» Image hover effect using jQuery

Comments

2 Responses to “Block Shuffling effect using jquery”

Stuart on June 9th, 2008 4:15 pm

Hi Roshan, thank you so much for sharing your knowledge!
I am currently learning jQuery and have a question about the code you chose to use in this example:

in the animation you use margin -=400px and +=400px. Wouldn’t margin -400px and margin 0px do the same thing? Seems clearer to me to do it that way so I wondered why you choose to do it the way you did. Thx!
Roshan on June 9th, 2008 4:52 pm

No stuart, margin -400px and 0px are different. Although, negative margin is not considered as a good practice, I’ve to use it in my example. I’ve found problem with absolute positioning with left property. It was not consistent in all browser so have to use this way…

Leave a Reply