section class="content1">
    <div class="buttons">
        <button value="all">ALL</button>
        <button value="black">BLACK</button>
        <button value="white">WHITE</button>
                       :
    </div>
</section>
<section class="content2">
    <ul class="gallery">
        <li class="vegetables green"><img src="img/gallery/きゅうり.jpg" alt="g1"></li>
        <li class="Vegetables green"><img src="img/gallery/キャベツ.jpg" alt="g2"></li>
        <li class="Vegetables fruits green red"><img src="img/gallery/スイカ.jpg" alt="g3"></li>
        <li class="Vegetables red"><img src="img/gallery/トマト.jpg" alt="g4"></li>
                       :
    </ul>
</section>

$(function(){

    let $filteringBtn = $(".buttons button"),
        $image = $(".gallery li");

    // フィルタリングボタンがクリックされた時の処理
    $filteringBtn.click(function(){

        let target = $(this).attr("value");

        // 各画像に対する処理
        $image.each(function(){
            // 初期値として全てを非表示にする
            $(this).animate({
                "opacity": 0
            }, 300, function(){
                $(this).hide();
                /* 
                指定の画像要素にクリックされたボタンのvalueのクラスが入っていれば表示
                value属性がallの場合も表示する
                */
                if($(this).hasClass(target) || target == "all") {
                    $(this).show();
                    $(this).animate({
                        "opacity": 1
                    }, 300);
                }
            });
        });
    });
});