var buttonAll = $('.works-button')[0],
    buttonWeb = $('.works-button')[1],
    buttonGraphic = $('.works-button')[2],
    buttonArt = $('.works-button')[3],
    worksWeb = $('.category-web'),
    worksGraphic = $('.category-graphic'),
    worksArt = $('.category-art'),
    worksAll = $('.work-image-link'),
    showOnly = function(cat){
        worksAll.hide();
        cat.show('fast', function(){
            cat.appendTo('.works-flow');
        });
    };

$(document).ready(function(){
    $(buttonAll).on('click', function(){
        worksAll.show('fast', function(){
            worksAll.appendTo('.works-flow');
        });
    });

    $(buttonWeb).on('click', function(){
        worksAll.hide('fast');
        worksWeb.show('fast', function(){
            worksWeb.appendTo('.works-flow');
        });
    });

    $(buttonGraphic).on('click', function(){
        worksAll.hide('fast');
        worksGraphic.show('fast', function(){
            worksGraphic.appendTo('.works-flow');
        });
    });

    $(buttonArt).on('click', function(){
        worksAll.hide('fast');
        worksArt.show('fast', function(){
            worksArt.appendTo('.works-flow');
        });
    });

});

// Хочу, чтобы такой фрагмент:

// $(buttonWeb).on('click', function(){
//     worksAll.hide('fast');
//     worksWeb.show('fast', function(){
//         worksWeb.appendTo('.works-flow');
//     });
// });

// можно было заменить на:

// $(buttonWeb).on('click', showOnly(worksWeb));