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

当您在 jquery 上执行 fadeOut() 时，您只是少了一个 .not(".overlay")。

你可以添加$("#portfolio div").not("."+selectedClass).not(".overlay").fadeOut().removeClass('scale-anm'); 来解决你的问题。

可以测试一下here