Question

我正在使用以下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>

我确信这有一个简单的解决方案，所以只有正确的文章才能淡入淡出，但我无法理解我的生活！

Answer 1

  $('#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);
        });
    });

Answer 2

试试这个：

$('#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);
    });
});

发生这种情况是因为你淡化了所有元素

Answer 3

您可能只会尝试淡化具有锚点ID作为类的文章：

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

元素在再次淡出之前闪烁

3 个答案: