Элементы вспыхивают до исчезновения снова

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

это происходит потому, что вы FadeIn все элементы

Answer 3

Вы можете попробовать только замирания в статьях, имеющих идентификатор якоря как класс:

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