jQuery FadeOut () не работает.Нажмите просто прыгает вместо - PullRequest
0 голосов
/ 04 мая 2011

Может кто-нибудь пролить свет на этот фрагмент.

Я пытаюсь интегрировать плагин jQuery Masonry с фильтрацией. По какой-то причине часть функции 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, но любая помощь в том, как проверить вывод или исправить это, будет высоко оценена.

Вот HTML-код для фильтрации

   <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>

Я также пытался указать ширину для элемента оболочки, но это не помогло.

1 Ответ

1 голос
/ 04 мая 2011

Я собрал быстрый пример работающего переключения fadeIn fadeOut, основанного на предоставленном вами коде. С размещенным вами html / javascript я не уверен на 100%, какова конечная цель, однако, надеюсь, это поможет вам в правильном направлении с вашим переключателем:

jQuery fadeIn / fadeOut demo

...