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（＆＃34; display＆＃34;，＆＃34; block＆＃34;），除了显示属性恢复到最初的状态。如果元素的显示值为内联，则隐藏并显示，它将再次以内联方式显示。

jQuery fadeAt不对display css属性做任何事情。因此元素仍在页面上。当元素没有显示：隐藏时，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。

此外，最好将群组分割为淡入和淡出，并对其应用不同的动画，这会使滤出的li淡出，而其他淡出淡出{{1同时淡入。

li

请参阅jsfiddle

在jquery内容过滤器中取消淡入淡出效果

2 个答案: