jQuery plug-in MixItUp implements animation filtering and sorting_jquery

What is MixItUp?

MixItUp is a jQuery plug-in that provides animated filtering and sorting.
MixItUp is great for managing any categorized or sorted content like portfolios, galleries and blogs, but also serves as a powerful tool for working on application user interfaces and data visualizations.
MixItUp plays well with your existing HTML and CSS, making it an excellent choice for responsive layouts.
Rather than using absolute positioning to control layout, MixItUp is designed to work with existing online flow layouts. Want to use percentages, media queries, inline-blocks, or even curved boxes? no problem!

Page code

<div id="Container"> 
  <div class="mix category-1" data-my-order="1"> ... </div> 
  <div class="mix category-1" data-my-order="2"> ... </div> 
  <div class="mix category-2" data-my-order="3"> ... </div> 
  <div class="mix category-2" data-my-order="4"> ... </div> 
</div> 

MixItUp targets the elements in the mixed container with the class. Classification filtering adds custom data properties for class and sort properties.

Build your filter controls:

class="filter" data-filter=".category-1">Category 1 
class="filter" data-filter=".category-2">Category 2 

Filtering occurs when the filter button is clicked.

Build your sort control:

class="sort" data-sort="my-order:asc">Ascending Order 
class="sort" data-sort="my-order:desc">Descending Order 

Sort occurs when the sort button is clicked.

CSS

#Container .mix{ 
  display: none; 
} 

In the item's style, set the target element to have no display attribute. MixItUp will display only those elements that match the current filter.

JS

Example MixItUp using jQuery container:

$(function(){ 
  $('#Container').mixItUp();  
}); 

Using the ID of our container, we can instantiate MixItUp with the jQuery method .mixItUp()

View DEMO Download now

The above is the entire content of this article, I hope you all like it.