Фильтрация классов jQuery и задержка / блокировка анимации преобразования css в разделе ниже

Question

Мой веб-сайт находится здесь:

https://thoughtpencil.com/testbed/

И я хотел получить фильтр портфолио в разделе "наши работы".

Я пытался объединить эту ручку:

https://codepen.io/creotip/pen/dfjeF и

https://www.w3schools.com/howto/howto_css_image_overlay_slide.asp

У меня есть фрагмент моего кода здесь:

https://jsfiddle.net/nfhzj7e9/

jQuery(document).ready(function($) {
    $(function() {
        var selectedClass = "";
        $(".fil-cat").click(function(){ 
        selectedClass = $(this).attr("data-rel"); 
     $("#portfolio").fadeTo(100, 0.1);
        $("#portfolio div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
    setTimeout(function() {
      $("."+selectedClass).fadeIn().addClass('scale-anm');
      $("#portfolio").fadeTo(300, 1);
    }, 300); 

    });
});
});

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

В качестве обходного пути я отключил анимацию в разделе ниже, но я был бы благодарен за любой ввод.

Answer 1

Вам просто не хватает еще одного .not(".overlay"), когда вы делаете fadeOut() в jquery.

Вы можете добавить $("#portfolio div").not("."+selectedClass).not(".overlay").fadeOut().removeClass('scale-anm');, чтобы решить вашу проблему.

Вы можете проверить это здесь