The jQuery plugin MixItUp implements animation filtering and sorting, and jquerymixitup

The jQuery plugin MixItUp implements animation filtering and sorting, and jquerymixitup

What is MixItUp?

MixItUp is a jQuery plug-in that provides animation filtering and sorting.
MixItUp is great, like managing portfolio, gallery and Blog content in any category or sort, and can also be used as a powerful tool, engage in application user interface and data visualization.
MixItUp works well with your existing HTML and CSS, making it an excellent choice for response layout.
Instead of using absolute positioning to control the layout, the MixItUp design works with the existing online stream layout. Do you want to use percentages, media queries, inline-block, 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 elements in the target and class hybrid containers. CATEGORY filtering adds custom data attributes for class and sorting attributes.

Create your filter control:

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

Filter occurs when the Filter button is clicked.

Create your sorting control:

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

The sorting occurs when the sorting button is clicked.

CSS

#Container .mix{   display: none; } 

In the style of the project, set the target element to no display attribute. MixItUp only displays the filter elements that match the current filter element.

JS

The jQuery container is used on the MixItUp instance:

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

Using the container ID, we can instantiate the MixItUp and jQuery methods. mixItUp ()

View DEMO download now

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