jQuery类过滤和css变换延迟/阻塞动画在它下面的部分

Posted 2023-03-06

【中文标题】jQuery类过滤和css变换延迟/阻塞动画在它下面的部分

【英文标题】：jQuery class filtering and css transform delaying/blocking animation in section below it

【发布时间】：2019-07-01 07:41:09

【问题描述】：

我的网站在这里：

https://thoughtpencil.com/testbed/

我想在“我们的作品”部分添加一个投资组合过滤器。

我正在尝试结合这支笔：

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

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

我的代码在这里有一个 sn-p：

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

    );
);
);

我预计悬停将继续有效，但它仅在我实际触发过滤器事件之前有效。

作为一种解决方法，我已禁用其下方部分中的动画，但我将不胜感激任何输入。

【参考方案1】：

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

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

你可以测试一下here