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

Cancel fadeTo effect in jquery content filter

本文关键字：fadeTo 效果 过滤器 jquery 取消      更新时间：2023-09-26

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

我试图修改以下过滤器效果的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)清除过滤器。请帮助!谢谢!

请指教。

来自jQuery网站:

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

. fadeto()方法使匹配元素的不透明度变成动画。它类似于. fadein()方法，但该方法会隐藏元素，并始终淡出为100%不透明度。http://api.jquery.com/show/

匹配的元素将立即显示，没有动画。这个大致相当于调用.css("display"， "block")，只是display属性被恢复到最初的状态。如果一个元素的显示值为inline，然后被隐藏并显示，它将再次以inline方式显示。

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);
    });
});

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

此外，最好将组拆分为淡入和淡出，并对它们应用不同的动画，这使得过滤掉的li s淡入，而其他先前的淡出li s同时淡入。

$(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

相关文章：