Фильтр jquery не плавает влево с выбранной категорией

Question

Я новичок в изучении jQuery. Я начал с обучающей программы на YouTube (которой уже несколько лет, так что я уверен, что она немного устарела) и последовал за ней до тройника, но когда я выбираю одну из вкладок категонии, изображения исчезают, но оставшиеся картинки не отображаются. плавать влево.

У меня вопрос, что мне не хватает, поэтому изображения категорий плавают влево, когда они выбраны?

Вот мой jsfiddle для моего кода.

$(document).ready(function(){
$('.category_item').click(function(){
    var category = $(this).attr('id');

    if(category == 'all'){
        $('.icon').addClass('hide');
        setTimeout(function(){
            $('.icon').removeClass('hide');
        }, 300);
    } else {
        $('.icon').addClass('hide');
        setTimeout(function(){
            $('.' + category).removeClass('hide');
        }, 300);
    }
});

});

PS: он работает на моем сайте, но по какой-то причине фильтр не отображается для меня в jsfiddle.

Answer 1

Вы должны добавить ни одного дисплея к .hide в вашем CSS, это должно быть:

.hide {
  transform: scale(0);
  width:0;
  padding:0px;
  transition:all 0.4s ease-in-out;
  display: none; // THIS NEED TO UPDATE
}

Это работа после добавления display: none, проверьте здесь: https://jsfiddle.net/Lcu7h1rd/31/