Я работаю над созданием плагина mini-sort с jquery.
Я хочу иметь возможность запускать анимацию css при событии click, но я обнаружил, что анимация не запускается на элементах, которые были скрыты с помощью display: none;
,
Я попытался создать класс и применить этот класс к элементу, но это не сработает.
$('.legend li').on('click',function(){
var thisClass = $(this).attr('class');
$('div').not('.'+thisClass).removeClass('active');
$('div.'+thisClass).addClass('active');
});
Я нашел плагин, который имеет ту же функциональность, что и я, но я хотел бы попытаться построить что-то меньшее, и мне всегда хотелось попробовать себя как опыт, прежде чем прибегать к плагинам. Я немного смущен тем, как они запускают анимацию. Это похоже на встроенный css, но когда я попытался добавить встроенные переходы, эффекта не было. Хотя я мог видеть переходы в теге стиля.
редактировать
Вот скрипка. http://jsfiddle.net/NktDU/1/
Вместо этого вы можете использовать jQuery hide
и show
$('#grid div').not('.'+thisClass).hide("fast").removeClass('active');
$('#grid div.'+thisClass).show("fast").addClass('active');
и удалить display:none
из CSS
Или вы можете сделать это, просто используя переходы CSS и переключая ширину, например
#grid div {
display: block;
height: 20px;
width: 0px;
margin:0px;
float: left;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background: black;
}
#grid .active {
width:20px;
margin: 2px;
}
Я думаю, что библиотека, которую вы должны написать для чего-то подобного, огромна. В этом случае я настоятельно рекомендую вам работать над реализацией Isotope by David DeSandro.
Это плагин, о котором вы говорили? Я могу заверить вас, что, хотя вы хотите придумать свое решение, вы можете сделать свой изотоп. Я реализовал его пару раз. Вы многому научитесь, и в то же время узнаете, как работают jQuery/JS/CSS (и медиа-запросы).
Я реализовал щелчок для сортировки, и я также создал свой собственный поиск по ключевым словам. Я могу собрать пару скриптов, если вы хотите...
Изменить: я только что видел ссылку на плагин, который вы нашли... он на самом деле использует изотопную структуру и рекомендует использовать изотоп в определенных ситуациях.
Удачи!