Jquery 元素在再次消失之前闪烁

我使用下面的jQuery代码对单个页面上的Wordpress文章进行排序，这样所有文章都会在页面加载时显示，然后当单击类别链接时，不相关的文章就会淡出

不过，当点击分类链接时，所有文章都会短暂闪烁，然后再次淡出，留下正确的文章

Jquery

$('#filters a').click(function(e){
    e.preventDefault();
    var filter = $(this).attr('id');

    $('#sortable-portfolio article').fadeIn("slow", function() {
        $(this).removeClass("inactive", 500);
    });


    $('#sortable-portfolio article:not(.' + filter + ')').fadeOut("slow", function() {
        $(this).addClass("inactive", 500);
    });
});

HTML

<a href="#" id="category-outdoor">Outdoor</a>
<a  href="#" id="category-live">Live</a>

我相信有一个简单的解决办法，这样只有正确的文章才能淡入淡出，但我无法为自己的生活找到答案

试试这个：

  $('#filters a').click(function(e){
        e.preventDefault();
        var filter = $(this).attr('id');

        $('#sortable-portfolio article.' + filter).fadeIn("slow", function() {
            $(this).removeClass("inactive", 500);
        });


        $('#sortable-portfolio article:not(.' + filter + ')').fadeOut("slow", function() {
            $(this).addClass("inactive", 500);
        });
    });

$('#filters a').click(function(e){
    e.preventDefault();
    var filter = $(this).attr('id');

    $('#sortable-portfolio article.' + filter).fadeIn("slow", function() {
        $(this).removeClass("inactive", 500);
    });


    $('#sortable-portfolio article:not(.' + filter + ')').fadeOut("slow", function() {
        $(this).addClass("inactive", 500);
    });
});

---

发生这种情况是因为您在所有元素中淡入淡出，您可能只会尝试在具有锚定ID作为类的文章中淡入淡出：

$('#sortable-portfolio article .' + filter).fadeIn("slow", function() {
    $(this).removeClass("inactive", 500);
});

---

$（“#可排序的公文包文章”）。fadeIn将在所有文章中淡出，然后淡出您不想要的文章。如果这是jQuery500 for addClass不做任何事情，请提供小提示