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

你应该在你的 css 中添加 display none 到 .hide，它应该是:

.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/