Switch from grid view to list (and back) with a fade effect

Switch from grid view to list (and back) with a fade effect

I have a category page that can be viewed in grid or a list. I want to add a fade affect when I switch between the views. How can I do that?
Here is my js:

    $("a.grid_view").click(function () {
      $(".category_div").addClass("box_view");
      $(this).addClass("active");
       $("a.list_view").removeClass("active");
    });
    $("a.list_view").click(function () {
     $(".category_div").removeClass("grid_view");
      $(this).addClass("active");
      $("a.box_view").removeClass("active");
    });