jQuery Animation on applying filters or sort elements

Question

i would like to ask if anyone knows how to create an animation like this plugin shufflejs on sorting div elements or applying filters.

Any help?

Thank you :)

Answer 1

This is simple example using animate of JQuery function:

$(document).ready(function(){
  
   
   var asc =false;
   $("#sort").change(function(){
    if(asc){
       asc=false;
       todesc();  
    }
     else{
       asc=true;
       toasc();
    }
     
   });
  
  
});





function toasc(){
  var count_size = $('.col').size();
  // showing
     var cnt=1;
     var top_=0;
     var left_=0;
     for(var i=0;i<count_size;i++){
     for(var j=0;j<count_size;j++){
       var val = $('.col').eq(j).attr('value');
       if(cnt==val){
         if(cnt%2==0){
           $('.col').eq(j).animate({left:left_+'px',top:top_+'px'},2000);
           left_=0;
           top_+=100;
         }
         else{
           $('.col').eq(j).animate({left:left_+'px',top:top_+'px'},2000);
           
           left_=100;
         }
         cnt++;
       }
     }
     }
    }
  
  function todesc(){
    var count_size = $('.col').size();
  // showing
     var cnt=6;
     var top_=0;
     var left_=0;
     for(var i=0;i<count_size;i++){
     for(var j=(count_size-1);j>=0;j--){
       var val = $('.col').eq(j).attr('value');
       if(cnt==val){
         if(cnt%2==0){
           $('.col').eq(j).animate({left:left_+'px',top:top_+'px'},2000);
           left_=100;
           
         }
         else{
           $('.col').eq(j).animate({left:left_+'px',top:top_+'px'},2000);
           top_+=100;
           left_=0;
         }
         cnt--;
       }
     }
     }
    }

.row{
  width:220px;
  height:320px;
  position:relative;
}
.col{
  width:100px;
  height:100px;
  border:1px solid #323232;
  position:absolute;
 }

#sort{
  float:left;
  width:200px;
}

#col1{
  top:0; 
}
#col2{
  top:0; 
  left:100px;
}


#col3{
  top:100px;  
}
#col4{
  top:100px;  
  left:100px;
}

#col5{
  top:200px;  
}
#col6{
  top:200px;  
  left:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="row" class="row">
    <div id="col1" class="col" value="3">C</div>
    <div id="col2" class="col" value="6">F</div>

    <div id="col3" class="col" value="4">D</div>
    <div id="col4" class="col" value="2">B</div>

    <div id="col5" class="col" value="1">A</div>
    <div id="col6" class="col" value="5">E</div>
</div>

<select name="sort" id="sort">
  <option value="1">DESC</option>
  <option value="2">ASC</option>
</select>