Плавно скрыть и показать элемент списка

var newSelection = ""; 
$("#category a").click(function() { 
  $("#category a").removeClass("current"); 
  $(this).addClass("current"); 
  newSelection = $(this).attr("rel"); 
  $(".category").not("." + newSelection).slideUp(200); 
  $("." + newSelection).slideDown(300); 
});

.menu{margin-right: 7%; margin-left: 7%;text-align: center; min-width: 1200px;font: 12px/1.5em Arial, Helvetica, sans-serif, "Arial Narrow";color:#a5a5a5;} 
.menu img{border: 1px solid #d5d5d5; border-radius: 4px 4px 4px 4px;background:#FFFFFF;padding:10px;} 
.menu img:hover{border: 1px solid #A9CF54;box-shadow:0 0 5px #A9CF54;} 
 
.menu ul{text-align: center;} 
.menu li{float: left;margin: 0 12px 20px 0;overflow: hidden;width: 245px;padding:5px; color: green; text-align: center;} 
#category {margin-right: 7%; margin-left: 7%; color: red;} 
#category h1{color: grey; font-size: 350%;margin-left: 0;} 
#category a { padding: 2px 6px; border: 1px solid #A74C10; } 
#category a:hover, #category a.current { background: #A74C10; color: white; } 
 
.menu h1{ 
height: 40px; 
}