在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")，除了 display 属性恢复到最初的样子。如果一个元素的显示值为 inline ，然后被隐藏并显示，它将再次被显示为 inline。

jQuery fadeAt 对显示 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);
    });
});

Answer 2

.fadeTo只是改变不透明度，所以你需要使用fadeTo来改变元素，而不是.show。

另外，最好将组拆分为淡入淡出，并对它们应用不同的动画，这使得过滤掉的lis淡入，而其他prev淡出lis同时淡入时间。

$(document).ready(function() {
    $(".filter").click( function () {
        var filter = '.' + $(this).attr('href').replace('#','');
        $("li")
            .filter(filter).fadeTo("slow", 1)    // fade in those not filtered
            .end()          // Back to original set.
            .not(filter).fadeTo("slow", 0.33); // fade out those filtered.
    });

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

见jsfiddle