jQuery fadeOut () не работает. Вместо этого нажмите просто переходы

#jquery #fadeout

#jquery #исчезновение

Вопрос:

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

Я пытаюсь интегрировать плагин 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. Кажется, что это работает, когда функция click остается внутри инструкции else, но всякий раз, когда отображаются ВСЕ поля, затем она переходит к скрытию невыбранных полей, это не работает. Надеюсь, это поможет.

2. Я думаю, вам следует опубликовать некоторую часть HTML-кода. Зачем вам нужен класс ‘invis’? Не могли бы вы проверить скрытый статус?

3. Я добавил HTML, который ссылается на функцию click. Надеюсь, это поможет.

4. Не уверен, как этот php / html-код связан с js-кодом, .portfolio и .box их там нет. Кроме того, ‘.fbox’ не является допустимым именем класса css, и в коде js вам следует использовать ‘addClass()’ и ‘removeClass()’ вместо ‘toggleClass()’, потому что вы уже знаете, присутствует класс или нет.

5. По какой-то причине, когда я использую панель разработчика Chrome, затухание становится более заметным, я просто не знаю, почему оно отстает только в определенных ситуациях.

Ответ №1:

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

jQuery fadeIn / демо-версия fadeOut

1. Спасибо за попытку, но это просто скрывает их, и кнопки не работают, чтобы вернуть их обратно.

2. Пример в jsfiddle, который я опубликовал, работает в этом случае, однако для вашего случая может потребоваться некоторая адаптация. Это не должно было быть решением для прямого копирования / вставки. Я бы посоветовал одну вещь, учитывая текущее состояние вашего кода, вставленного в ваш вопрос, измените toggleClass на addClass или removeClass, где это уместно.