1
我使用jQuery的同位素过滤Portofolio科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过渡...更新链接 –
看起来在我的Chrome中工作正常。 – Turnip
你救了我的一天哥们!谢谢! –