2011-05-03 30 views
0

有人可以在这个片段上点亮一些。jQuery FadeOut()不起作用。点击只是跳跃而不是

我正在尝试将jQuery Masonry Plugin与过滤功能集成在一起。出于某种原因,函数的FadeIn部分适用于所有级别,但fadeOut()不适用。

下面是代码:

$j('#filter a').click(function(){ 
        var colorClass = '.' + $j(this).attr('class'); 
        //if($j('.portfolio').hasClass(colorClass){ 

        if(colorClass=='.box') { 
        // show all hidden boxes 
        $j('.portfolio').children('.invis') 
         .toggleClass('invis').fadeIn('slow'); 
        } else { 
        // hide visible boxes 
        $j('.portfolio').children().not(colorClass).not('.invis') 
         .toggleClass('invis').fadeOut('slow','linear'); 
        // show hidden boxes 
        $j('.portfolio').children(colorClass+'.invis') 
         .toggleClass('invis').fadeIn('slow', 'linear'); 
        } 
} 

我仍然在我的js和jQuery的技能提高,但对如何测试输出或解决这一问题的任何帮助,将不胜感激。

下面是过滤

<div id="filter"> 
<ul> 
    <?php 
    $taxonomy = 'portfolio-box-sets'; 
    $terms = get_terms($taxonomy, 'hierarchical=0'); 
     echo '<li><a class=".fbox">All</a></li>'; 
     if ($terms) { 
      foreach($terms as $term) { 
      echo '<li><a class="'.$term->name.'">' . $term->name . '</a></li>'; 
      } 
     } 
    ?> 
</ul></div> 

我也试着指定宽度的包装元素,但它并没有帮助的HTML。

+0

看来,当工作点击功能仍然在else语句中,但是随时显示所有框,然后隐藏未选中的框不起作用。希望有所帮助。 – 2011-05-03 22:34:09

+0

我想你应该发布一些部分的HTML代码。你为什么需要一个'invis'类?你不能检查隐藏状态吗? – morgar 2011-05-03 23:12:05

+0

我添加了链接到点击功能的HTML。希望有所帮助。 – 2011-05-03 23:52:55

回答

1

我已经放在一起工作淡入的一个快速示例淡入淡出根据您提供的代码松散地切换。与HTML/JavaScript的你张贴,我不是100%确定什么最终目标是,但是,希望这将让你在正确的方向与切换:

jQuery fadeIn/fadeOut demo

+0

谢谢你的尝试,但只是隐藏它们,而按钮不能使它们恢复原状。 – 2011-05-05 22:12:22

+0

在我发布的jsfiddle中的例子在这种情况下工作,但是,它可能需要适应您的情况。这并不意味着是一个直接的复制/粘贴解决方案。有一件事我会建议,与您的代码的当前状态粘贴在您的问题,更改toggleClass为addClass或removeClass在适当的位置。 – ryanmarc 2011-05-06 02:29:08