javascript - 取消 jquery 内容过滤器中的 fadeTo 效果

Question

基本上，我希望在单击按钮后将文本淡出到一定的不透明度。

我正在尝试将以下滤镜效果修改为 fadeTo() jquery。代码取自http://jsfiddle.net/gxfBD/33/

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

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

代码已修改为https://jsfiddle.net/Eelyn/9pw0uecz/

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

$(".clearfilter").click( function() {
    $("li").fadeTo("slow", 1);
});

});

但是我修改代码后，过滤功能就不起作用了。这意味着我无法使用 fadeTo("slow", 1) 清除过滤器。请帮忙!谢谢!

如有任何指导，我们将不胜感激。

Answer 1

来自 jQuery 网站:

https://api.jquery.com/fadeTo/

.fadeTo() 方法对匹配元素的不透明度进行动画处理。它类似于 .fadeIn() 方法但该方法取消隐藏元素并且始终淡出至 100% 不透明度。

http://api.jquery.com/show/

匹配的元素将立即显示，没有动画。这大致相当于调用 .css("display", "block")，只不过显示属性恢复为最初的状态。如果某个元素的显示值为内联，那么隐藏并显示后，它将再次内联显示。

jQuery fadeAt 不会对 display css 属性执行任何操作。所以元素仍然在页面上。当元素没有 display:hidden 时，show 方法不会执行任何操作。

http://jsfiddle.net/kamikazefish/gxfBD/106/

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

    $(".clearfilter").click( function() {
        $("li").fadeTo("slow", 1);
    });
});