سلام

امروز می خواهیم پلاگین Filter رو معرفی کنیم که به ما امکان میدهد تا بتوانیم آیتم ها را با انواع انیمیشن ها جابه جا و مرتب کنیم.برای ایجاد انواع افکت ها نیز می توانید از CSS3 و یا خود jQuery برای ایجاد fadeIn/Out استفاده کنید.برای دیدن نمونه ها می توانید در انتهای مطلب به گزینه پیش نمایش بروید و یا کدهای آن را دانلود کنید

کد جاوا اسکریپت

$('.filters').filters({
filter: {
name: 'filter', // (string) class name for links container
element: 'a', // (string) HTML selector
active: 'active' // (string) class name for active element
},
container: {
name: 'container', // (string) class name for items container
element: 'li' // (string) HTML selector
},
css3: {
init: true, // (bool) use CSS3 transitions
children: 'a', // (string) HTML selector (children of filter.element)
property: 'all 1s ease', // (string) CSS3 property for transitions
transform: { // (object) CSS3 transform properties, please use: scale, rotate, skew
scale: '0'
}
},
move: {
init: true, // (bool) set the true if you want fixed position of elements
easing: 'linear', // (string) set the easing of the animation, you can also use: jQuery Easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/
duration: 500 // (int) set the speed of the easing animation in milliseconds
},
fade: {
duration: [500, 500], // (array) set the speed of the fading animation in milliseconds - [fadeOut, fadeIn]
opacity: [0, 1] // (array) set the opacity of elements
},
fixed: false, // (bool) setthe true if you want adjust height of the container
onclick: function(filter, element){}
 
});

کد HTML

    <div class="filters">
    <div class="filter">
    <a href="#" rel="collection_name_1">Collection #1</a>
    <a href="#" rel="collection_name_2">Collection #2</a>
    <a href="#" rel="all">All</a>
    </div>
    <div class="container">
    <ul>
    <li class="collection_name_1"> .. </li>
    <li class="collection_name_2"> .. </li>
    <li class="collection_name_1"> .. </li>
    <!-- etc. -->
    </ul>
    </div>
    </div>

همینطور که گفتیم می توانید فایل های مربوطه را از زیر دریافت کنید یا ببینید.

منبع