Block Shuffling effect using jquery

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

4 thoughts on “Block Shuffling effect using jquery

  1. Stuart

    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!

  2. 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…

  3. Sorry by my english, I’m spanish.
    I’ve used your example, and it’s fantastic. But I have more content in the page down the contaniner when I click en one of the links the scroll go down and the div (msg_body) appear just in the beggining of the page. How can we resolve that problem?

  4. Chafik

    Thanks a lot for sharing all this knowledge
    it is wonderfull !!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>