Home/ Questions/Q 3312924
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T22:03:16+00:00

I have a stack of cards. They are stacked so each one has about

  • 0

I have a stack of cards. They are stacked so each one has about a centimetre at the bottom visible. What I want, is when a card is clicked it moves to the right, then gets sorted to the top and moves to the left back onto the pile. I then wish to trigger a page change (to the page that’s represented by the card).

How would I do this through JQuery? I’m still at a basic level with this language.

<style>
#cardStack{
    height: 700px;
    width: 400px;   
    overflow:visible;
}
#cardStack ul{
    display:inline;
}
#cardStack li{
    z-index:auto;
}
.top{
    margin-top:-670px;
    z-index:1;

}
.middle{
    margin-top:-670px;
    z-index:2;
}
.bottom{
    margin-top:100px;
    z-index:3;
}
</style>
</head>

<body><br /><br />
<div id="cardStack">
<ul>
    <li class="bottom"><img src="images/cardA.png" /></li>
    <li class="middle"><img src="images/card6.png" /></li>
    <li class="top"><img src="images/card8.png" /></li>
</ul>
</div>

I know there’s an animate function, but how would I initiate this on a click?

EDIT: Added more code above

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    for the hash change use ben alman’s BBQ plugin
    tried your code at jsbin
    but because the link to the cards is missing the HTML doesn’t render right
    if you put here a working jsbin sample – helping you will be mush easier

    concerning the animations: if you layout the Li’s to have an absolute position, you can move them around freely,
    so you can animate them to the left and then animate back and then change the z-index to put it on the top

    [edit]
    So.. here is a link to a quick solution:
    you had some problems with the animations code, + better to change the position and not the marign

    for ref the code:

    $('#cardStack img').click(function () 
{
       var img = $(this);
       img.animate({left: '+=50px'},200,function() 
          {
                img.animate({left: '-=50px'},200,function()
                     {
                       img.parent().prependTo($("ul"));
                       arrengeClasses();
                     });
          });
});

function arrengeClasses()
{
    var allListItems = $("#cardStack ul li");
    for(var i=0;i<allListItems.length;++i)
    {
      allListItems.eq(i).removeClass().addClass("pos" + i);
    }
}

    • and changed the css a bit:

       #cardStack li img{
    position:absolute;
     top:0px;
     left:0px;
    }
 .pos2{
    z-index:1;
    margin-top:100px;
 }
 .pos1{
    z-index:2;
    margin-top:50px;
 }
 .pos0{
   z-index:3;
 }
    • 0