JSFiddle - React, Tailwind, and code Playground

by zainshaikh

HTML

<link rel="stylesheet" href="https://twimg0-a.akamaihd.net/a/1328219035/t1/css/t1_core_logged_out.bundle.css" type="text/css" media="screen">

<div class="avatars-container">
    <span class="avatar-container"><a href="javascript:;"><img src="https://si0.twimg.com/profile_images/1397434660/meer-taqi-meer_normal.jpg" class="avatar js-action-profile-avatar"></a></span>
    <span class="avatar-container"><a href="javascript:;"><img src="https://si0.twimg.com/profile_images/1360005859/hasrat_normal.jpg" class="avatar js-action-profile-avatar"></a></span>
    <span class="avatar-container"><a href="javascript:;"><img src="https://si0.twimg.com/profile_images/1691458655/Ghalib_normal.jpg" class="avatar js-action-profile-avatar"></a></span>
    <span class="avatar-container"><a href="javascript:;"><img src="https://si0.twimg.com/profile_images/1526516316/download_normal.jpg" class="avatar js-action-profile-avatar"></a></span>
    <span class="avatar-container"><a href="javascript:;"><img src="https://si0.twimg.com/profile_images/1646900251/faiz_normal.png" class="avatar js-action-profile-avatar"></a></span>
    <span class="avatar-container"><a href="javascript:;"><img src="https://si0.twimg.com/profile_images/1454728807/30th-death-anniversary-today-Sahir-Ludianavi_s_normal.jpg" class="avatar js-action-profile-avatar"></a></span>
      <span class="avatar-container"><a href="javascript:;"><img src="https://si0.twimg.com/profile_images/1717022900/Faiz_lrg-vo-1pm_normal.jpg" class="avatar js-action-profile-avatar"></a></span>
     <span class="avatar-container"><a href="javascript:;"><img src="https://si0.twimg.com/profile_images/1581595171/gulzar-pic_normal.jpg" class="avatar js-action-profile-avatar"></a></span>
      <span class="avatar-container"><a href="javascript:;"><img src="https://si0.twimg.com/profile_images/1551865653/412px-mirza_ghalib_normal.jpg" class="avatar js-action-profile-avatar"></a></span>
</div>


<div class="new-con">
   
</div>

CSS

.avatars-container {width: 240px;position:relative}
.new-con {}

JavaScript

$('.avatar-container').each(function(i, item){
    console.log($(item).offset().top);
    $(item).css({
        right: $(item).parent().width() - $(item).offset().left
        //,top: $(item).offset().top
        //,position: 'absolute'
    });
});

$('.avatar-container a').click(function(){
    
    var nextAll = $(this).parent().nextAll();
    var prevAll = $(this).parent().prevAll();

    var s = $.merge(prevAll ,nextAll );

    $.each(s, function(i,item){

        setTimeout(function(){
            var sp = '<span class="avatar-container"><a href="javascript:;"><img src="https://si0.twimg.com/profile_images/1551865653/412px-mirza_ghalib_normal.jpg" style="visibility:hidden" class="avatar js-action-profile-avatar"></a></span>'
            $(item).before(sp);
            $(item).remove().appendTo('.new-con');
            $(item).css({'position': 'absolute'}).animate({
                top: i*52,
    right:0
            });
        
        }, i*100);
        
        
    });

});