动画 隐藏 css,从CSS类动画显示/隐藏

我是JavaScript和jQuery的新手，所以请对我温柔。我试图根据它是否具有某个类别来动画显示/隐藏多个div。从CSS类动画显示/隐藏

基本上，我为摄影师创建一个网站，并在顶部有一个过滤器列表，每个div都有一个“组合项目”类以及所有类别的附加类在，所以家庭/婚礼/孩子/夫妇。任何图像可以有多个类。

我想要做的是点击家庭链接，它隐藏任何没有家庭课的东西。如果我然后点击婚礼，它会关闭当前没有婚礼课的任何东西，并打开目前关闭的任何有婚礼课程的课程。

我目前使用下面的代码工作，但这只是简单地关闭所有东西，然后打开那些需要类的东西。另外我不知道如何为它添加动画。

function portfolioItems(filter) {

$(".portfolio-items").hide();

$("."+filter).show(); }

function initEventHandlers() {

$(".port-all").click(function() {

$(".portfolio-items").show();

return false;

})

$(".port-wedding").click(function() {

portfolioItems("wedding");

return false;

})

$(".port-family").click(function() {

portfolioItems("family");

return false;

})

$(".port-kids").click(function() {

portfolioItems("kids");

return false;

})

$(".port-couples").click(function() {

portfolioItems("couples");

return false;

}) }

的HTML是...

+0

看一看.hasClass表明()http://api.jquery.com/ hasClass –

+0

我看了一下，但我无法弄清楚，这就是我想与... 功能showHidePortItems(){ 如果(过滤===“全”){ \t $ ( “.portfolio项”)显示()。 ($(“。portfolio-items”)。hasClass(filter)){ \t $(this).show(); \t}; \t else { \t $(this).hide(); \t}; }; } –

+0

请提供示例HTML，以便我们可以定制对已有内容的响应。 –