同位素过滤器与jquery css覆盖不工作如预期

Isotope filter with jquery css overlays not working as expected

本文关键字：工作 覆盖 过滤器 jquery css 同位素      更新时间：2023-09-26

我有一个奇怪的问题，我正在使用同位素的可过滤功能对我的投资组合中的元素进行排序。当用户将鼠标悬停在某个组合元素上时，使用以下代码触发覆盖:

/***************************************************
        PORTFOLIO ITEM IMAGE HOVER
***************************************************/
$(window).load(function(){
    $(".portfolio-grid ul li .item-info-overlay").hide();
    if( is_touch_device() ){
        $(".portfolio-grid ul li").click(function(){
            var count_before = $(this).closest("li").prevAll("li").length;
            var this_opacity = $(this).find(".item-info-overlay").css("opacity");
            var this_display = $(this).find(".item-info-overlay").css("display");

            if ((this_opacity == 0) || (this_display == "none")) {
                $(this).find(".item-info-overlay").fadeTo(250, 1);
            } else {
                $(this).find(".item-info-overlay").fadeTo(250, 0);
            }
            $(this).closest("ul").find("li:lt(" + count_before + ") .item-info-overlay").fadeTo(250, 0);
            $(this).closest("ul").find("li:gt(" + count_before + ") .item-info-overlay").fadeTo(250, 0);    
        }); 
    }
    else{   
            $(".portfolio-grid ul li").hover(function(){
                $(this).find(".item-info-overlay").fadeTo(250, 1);
                }, function() {
                    $(this).find(".item-info-overlay").fadeTo(250, 0);      
            });
        }
});

然而，有时由于同位素过滤器接收"覆盖"属性/类的方式而隐藏的其他元素(在Chrome检查器中确认)，当显示的元素不显示时。我认为这与$(this).find选择错误的元素有关，因为它不理解同位素的过滤，但我不能确定。

这个现象是可见的，如果你去http://fagardesigns.com/portfolio点击'aftermovie'，滚动到'Paint Splash'第二行第3位。

如果你重新加载页面，这个有时会消失，这也是奇怪的事情。

我看到的是:如果你选择ALL作为过滤器，然后切换到其他过滤器，它是有效的。然而，在你的jquery.同位素.min.js你初始化同位素的地方(为什么你在这里做而不是在你的custom.js?)，你的初始过滤器是advertisement 

var $container = $('#thumbs');
      $container.isotope({
        filter: '.advertisement', <= why is this the initial filter?
        itemSelector : '.item',
        animationEngine : 'jquery',
        animationOptions: {
            duration: 250,
            easing: 'linear',
            queue: false
        }
      });

当窗口大小改变时，为什么要重新初始化同位素?

    $(window).resize(function() {
        var $container = $('#thumbs');
            $container.isotope({
                filter: '.advertisement',
                itemSelector : '.item',
                animationEngine : 'jquery',
                animationOptions: {
                    duration: 250,
                    easing: 'linear',
                    queue: false
                }
        });
    });
相关文章：