Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
#cardStack{
  height: 700px;
  width: 400px;  
  overflow:visible;
}
#cardStack ul{
  display:inline;
}
#cardStack li{
  position:absolute;
}
#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;
}
</style>
</head>
<body><br /><br />
<div id="cardStack">
<ul>
  <li class="pos0"><img src="http://www.celfcreative.com/testarea/ActionPak/images/cardA.png" /></li>
  <li class="pos1"><img src="http://www.celfcreative.com/testarea/ActionPak/images/card6.png" /></li>
  <li class="pos2"><img src="http://www.celfcreative.com/testarea/ActionPak/images/card8.png" /></li>
</ul>
</div>
</body>
</html>
​
 
​
 
​
$('#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);
  }
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers