如何刪除類別過濾器的隱藏圖像的空白

Question

我剛剛做了一個類別過濾器，它包括隱藏我不需要的圖像，所以如果我點擊頂部的汽車標志，我將需要隱藏每個不包含“汽車”id 的元素，但是問題是出於某種原因它保留了隱藏圖像的尺寸。

例如：

css 代碼：

.block_container{
    flex-wrap: wrap;
    width: 632px;
    height: 350px;
    overflow-y: scroll;
    background-color: rgba(201, 201, 201, 0.5); 
    border-radius: 10px;
    box-sizing: border-box;
    display: block;
}
.game_item{
    margin: 13px;
    width: 176px;
    height: 100px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-sizing: border-box;
    float: left;
    transition: all 0.4s ease-in-out;
}
.hide{
    transform: scale(0);
    width: 0;
    height: 0;
    padding: 0;
    transition: all 0.4s ease-in-out;
}

JavaScript 代碼：

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

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

Answer 1

我想你只是忘記了保證金。 當您將 class 的“ .hide ”設置為 0 時，它應該可以正常工作。

工作示例：

 $(document).ready(function(){ $('.category_item').click(function(){ var category=$(this).attr('id'); if(category=='all'){ $('.game_item').addClass('hide'); setTimeout(function(){ $('.game_item').removeClass('hide'); }, 300); } else{ $('.game_item').addClass('hide'); setTimeout(function(){ $('.'+category).removeClass('hide'); }, 300); } }); });

 .block_container { flex-wrap: wrap; width: 632px; height: 350px; overflow-y: scroll; background-color: rgba(201, 201, 201, 0.5); border-radius: 10px; box-sizing: border-box; display: block; }.game_item { margin: 13px; width: 176px; height: 100px; border-top-left-radius: 10px; border-top-right-radius: 10px; box-sizing: border-box; float: left; transition: all 0.4s ease-in-out; }.hide { transform: scale(0); width: 0; height: 0; padding: 0; margin: 0; transition: all 0.4s ease-in-out; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button id="all" class="category_item" type="button">all</button> <button id="car" class="category_item" type="button">car</button> <button id="house" class="category_item" type="button">house</button> <button id="puzzle" class="category_item" type="button">puzzle</button> </div> <div class="block_container"> <img src="https://picsum.photos/id/234/200/300" class="game_item puzzle" /> <img src="https://picsum.photos/id/235/200/300" class="game_item puzzle" /> <img src="https://picsum.photos/id/236/200/300" class="game_item house" /> <img src="https://picsum.photos/id/237/200/300" class="game_item car" /> <img src="https://picsum.photos/id/238/200/300" class="game_item car" /> <img src="https://picsum.photos/id/239/200/300" class="game_item house" /> </div>

---

順便說一句，我認為操縱寬度、高度、變換等可能太多了，只設置opacity: 0; 並display: none; （使用 jQuery hide() ）

工作示例：

 $(document).ready(function(){ $('.category_item').click(function(){ var category=$(this).attr('id'); if(category=='all'){ $('.game_item').addClass('hide'); setTimeout(function(){ $('.game_item').show().removeClass('hide'); }, 300); } else{ $('.game_item').addClass('hide'); setTimeout(function(){ $('.game_item').hide(); $('.'+category).show().removeClass('hide'); }, 300); } }); });

 .block_container { flex-wrap: wrap; width: 632px; height: 350px; overflow-y: scroll; background-color: rgba(201, 201, 201, 0.5); border-radius: 10px; box-sizing: border-box; display: block; }.game_item { margin: 13px; width: 176px; height: 100px; border-top-left-radius: 10px; border-top-right-radius: 10px; box-sizing: border-box; float: left; transition: opacity 0.4s ease-in-out; }.hide { opacity: 0; transition: opacity 0.4s ease-in-out; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button id="all" class="category_item" type="button">all</button> <button id="car" class="category_item" type="button">car</button> <button id="house" class="category_item" type="button">house</button> <button id="puzzle" class="category_item" type="button">puzzle</button> </div> <div class="block_container"> <img src="https://picsum.photos/id/234/200/300" class="game_item puzzle" /> <img src="https://picsum.photos/id/235/200/300" class="game_item puzzle" /> <img src="https://picsum.photos/id/236/200/300" class="game_item house" /> <img src="https://picsum.photos/id/237/200/300" class="game_item car" /> <img src="https://picsum.photos/id/238/200/300" class="game_item car" /> <img src="https://picsum.photos/id/239/200/300" class="game_item house" /> </div>