JSFiddle - React, Tailwind, and code Playground

by blackjid

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<ul class="container">
    <li id="f1" class="friend"><img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs254.snc3/23126_1068970121_7263_q.jpg" width="30" height="30" /></li>
    <li id="f2" class="friend"><img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs338.snc4/41771_676989852_2790_q.jpg" width="30" height="30" /></li>
    <li id="f3" class="friend"><img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs442.snc4/48829_612356687_7908_q.jpg" width="30" height="30" /></li>
    <li id="f4" class="friend"><img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs321.snc4/41375_643457029_4035_q.jpg" width="30" height="30" /></li>
    <li id="f5" class="friend"><img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs322.snc4/41396_625033689_4689_q.jpg" width="30" height="30" /></li>
    <li id="f6" class="friend"><img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs230.ash2/49470_636006494_2020_q.jpg" width="30" height="30" /></li>
    <li id="f7" class="friend"><img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs327.snc4/41498_643901649_1501_q.jpg" width="30" height="30" /></li>
    <li id="f8" class="friend"><img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs465.snc4/49060_745373272_6848_q.jpg" width="30" height="30" /></li>
    <li id="f9" class="friend"><img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs167.ash2/41488_718629675_3886_q.jpg" width="30" height="30" /></li>
    <li id="f10" class="friend"><img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs462.snc4/48825_638182288_5285618_q.jpg" width="30" height="30" /></li>
    <li id="f11" class="friend"><img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs464.snc4/48985_626948341_5911_q.jpg" width="30" height="30" /></li>
    <li id="f12" class="friend"><img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs458.snc4/50096_503165516_5472_q.jpg" width="30" height="30" /></li>
   ...

CSS

html{
    padding:0;
    margin:0;
}

.friend{
    width:30px;
    height:30px;
    background: red;
    float:left;
    margin:2px;
    -webkit-transition: all 0.3s ease-in;
    position:relative;
}

.container{
    width:250px;
    display:inline-block;
    position:relative;
    background: #eee;
}

JavaScript

var friends = ["f1",
               "f2",
               "f3",
               "f4",
               "f5",
               "f6",
               "f7",
               "f8",
               "f9",
               "f10",
               "f11",
               "f12"];

function move(){
    var maxDelay = 0.1;
    var maxTotal = 0.3;
    var delay = Math.min(maxDelay, maxTotal/friends.length);
     $("#info").html(delay + " - " + maxTotal/friends.length);   
    _.each(friends, function(numid, index){
        var num = $("#"+numid);
        var x = num.position().left;
        var y = num.position().top;

        num.css("-webkit-transition-delay", delay * index + "s");
        num.css("z-index",100 + friends.length - index);
        num.css("top",-y);
        num.css("left",-x);
    });
}

$("#test, #move").bind("click", function(e){
    if(e.target.id == "test"){
        $(".friend").css("position","relative");
    }
    if(e.target.id == "move"){
        //move();
    }
});

$(".friend").bind("click", function(e){
    var coord;
    var originalCoord;
        
    originalCoord = $(e.target).position().left + "," + $(e.target).position().top;
    move($(e.target));
    coord = $(e.target).position().left + "," + $(e.target).position().top;
    
    $("#info").html("from " + originalCoord + " to " + coord + " @ " + e.target.id);
});

move();