Question

我一直试图让一种基本的过滤器工作。基本上，您单击链接并过滤列表（请参阅下面的代码）。这实际上很好。但是，我想通过逐渐淡出当前列表（无论是否过滤）来重新调整它，并在应用了正确的过滤器的情况下淡化列表。

希望你明白我的意思。如果我没有任何意义，请告诉我。

HTML：

filter by: <a href="#" class="clearfilter">all</a>
<h4>venue</h4>
<a href="#location1" class="filter">location1</a>, <a href="#location2" class="filter">location2</a>
<h4>photographer</h4>
<a href="#ben" class="filter">ben</a>, <a href="#ken" class="filter">ken</a>, <a href="#sam" class="filter">sam</a>, <a href="#susan" class="filter">susan</a>
<br/><br/>
<ul>
    <li class="ken location1"><a href="#">img 01</a></li>
    <li class="ken location1"><a href="#">img 02</a></li>
    <li class="ken location2"><a href="#">img 03</a></li>
    <li class="sam location2"><a href="#">img 04</a></li>
    <li class="sam location2"><a href="#">img 05</a></li>
    <li class="ben location2"><a href="#">img 06</a></li>
    <li class="ben location2"><a href="#">img 07</a></li>
    <li class="ben location2"><a href="#">img 08</a></li>
    <li class="susan location1"><a href="#">img 09</a></li>
    <li class="susan location1"><a href="#">img 10</a></li>
    <li class="susan location2"><a href="#">img 11</a></li>
    <li class="ken location2"><a href="#">img 12</a></li>
</ul>

的jQuery

$(document).ready(function() {
    $(".filter").click( function () {
        var filterText = $(this).attr('href').replace('#','');
        $("li").show().not('.'+filterText).hide();
    });

    $(".clearfilter").click( function() {
        $("li").show();
    });
});

CSS

li {
    margin-left:20px;
    margin-bottom:20px;
    border:1px solid red;
    width:40px;
    height:40px;
    display:block;
    float:left;
}
li a {
    width:40px;
    height:40px;
    display:block;
}

我再次尝试了常用的fadeOut（）和fadeIn（），但过滤器似乎适用于已经过滤的列表，没有任何回复。这就是为什么我在这一行中得到了初始show()：$("li").show().not('.'+filterText).hide();因为这似乎重置了列表。但是，如果我添加show（），它就不会正常淡出。

提前感谢您的帮助。小提琴链接：http://jsfiddle.net/gxfBD/33/

修改甚至连专业人士都没有做到这一点：http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/。他们跳了起来，简短地展示了不应该展示的项目。：/

再次编辑（替代答案）： Marc在下面的回答给了我启动所需的启动。我的新jQuery如下：

var filterText = "all";

$(document).ready(function() {
    $(".filter").click( function () {
        filterText = $(this).attr('href').replace('#','');

        if(filterText == "all") {
            $("#gallery a").colorbox({rel:'gallery'});
        }
        else {
            $("#gallery ."+filterText+" a").colorbox({rel:filterText});
        }
        showFilterList(filterText);
    });

    $("#gallery a").colorbox({rel:'gallery'});
});

function showFilterList(value) {
    if (value == "all") {
        $("#gallery").animate({
            opacity: 0
        }, 500, function() {
            // Animation complete.
            $("#gallery li").show(); //remove the filter so everything shows
        }).animate({
            opacity: 1
        }, 500);
    }
    else {
        $("#gallery").animate({
            opacity: 0
        }, 500, function() {
            // Animation complete.
            $("#gallery li").show(); //remove the filter so everything shows
            $("#gallery li").not('.'+value).hide(); //apply the new filter
        }).animate({
            opacity: 1
        }, 500);
    }
}

我还组合了colorbox插件并将调用添加到我的click事件中。这允许使用列表中新的过滤数量的图像来设置“图像x的y”文本。

希望能帮到别人。

Answer 1

你是否尝试过转换时间在hide（）和show（）中，就像1000毫秒的淡入淡出一样：

$(document).ready(function() {
  $(".filter").click( function () {
      var filterText = $(this).attr('href').replace('#','');
      $("li").show(1000).not('.'+filterText).hide(1000);
  });

  $(".clearfilter").click( function() {
      $("li").show(1000);
  });
});

Answer 2

试试这个：http://jsfiddle.net/gxfBD/74/

我给你的<UL>一个ID并将JS更改为：

$(document).ready(function() {
    $(".filter").click( function () {
        var filterText = $(this).attr('href').replace('#','');
        $("#ulid").hide(); //hide the whole div
        $("li").show(); //remove the filter so everything shows
        $("li").not('.'+filterText).hide(); //apply the new filter
        $("#ulid").fadeIn(1000); //fade in the div
    });
});

请注意，如果您想要更好地控制fadeOut()效果，可以在回调中进行过滤，如下所示：

$(document).ready(function() {
    $(".filter").click( function () {
        var filterText = $(this).attr('href').replace('#','');
        $("#ulid").fadeOut(1000,
                           function(){
                             $("li").show();
                             $("li").not('.'+filterText).hide();
                           }
                      );
        $("#ulid").fadeIn(1000);
    });
});

如果这不是你想要的，那么你需要更清楚你要找的是什么。

筛选列表：淡出当前筛选的列表，并在应用新筛选器的同一列表中淡入淡出

2 个答案: