1
Я использую JQuery Изотоп для фильтрации Раздел ПОРТФОЛИОJQuery Изотоп фильтрация Выпуск
Мои фильтры
<div id="filters" class="portfolioSection">
<ul>
<li><a class="current" href="#" data-filter="*">All</a></li>
<li><a href="#" data-filter="category-1">Category 1</a></li>
<li><a href="#" data-filter="category-2">Category 2</a></li>
<li><a href="#" data-filter="category-3">Category 3</a></li>
</ul>
</div>
Содержание Раздел
<div class="portfolioContent">
<ul class="row">
<li class="portfolio element category-1 category-2"><img src="img/project1.png">
<div class="projectName">Project Name</div>
<div class="projectCategory">Category 1</div>
</li>
<li class="portfolio element category-3"><img src="img/project2.png">
<div class="projectName">Project Name</div>
<div class="projectCategory">Category 1</div>
</li>
<li class="portfolio element category-3"><img src="img/project3.png">
<div class="projectName">Project Name</div>
<div class="projectCategory">Category 1</div>
</li>
<li class="portfolio element category-3"><img src="img/project4.png">
<div class="projectName">Project Name</div>
<div class="projectCategory">Category 1</div>
</li>
<li class="portfolio element category-1 category-3"><img src="img/project5.png">
<div class="projectName">Project Name</div>
<div class="projectCategory">Category 1</div>
</li>
<li class="portfolio element category-2"><img src="img/project6.png">
<div class="projectName">Project Name</div>
<div class="projectCategory">Category 1</div>
</li>
<li class="portfolio element category-1 category-2"><img src="img/project7.png">
<div class="projectName">Project Name</div>
<div class="projectCategory">Category 1</div>
</li>
<li class="portfolio element category-2"><img src="img/project8.png">
<div class="projectName">Project Name</div>
<div class="projectCategory">Category 1</div>
</li>
</ul>
</div>
Мой Jquery код:
var $container = $('.portfolioContent');
// initialize isotope
$container.isotope({
// options...
itemSelector : '.portfolio',
//layoutMode : 'fitRows'
});
// filter items when filter link is clicked
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
Когда я нажимаю «Все» кроме всего, все содержимое исчезает. А также эффект плавного перехода отсутствует.
Ссылка: http://play.mink7.com/sophiance/ Нажмите разделе Вид
omg: P спасибо большое. Я попробовал это. оно работает. любая идея abt transition ... обновила ссылку –
Выглядит отлично работает для меня в Chrome. – Turnip
Ты спасаешь моего приятеля! Благодаря! –