Jquery动画框垂直对齐中间

Question

我有这个小提琴，实际上如何使扩展器框（每个网格点击）动画为滚动到中间垂直对齐在身体上，也为最后一个我认为我面对的错误，它不能是单击后展开，另外li也会在点击最后一个li后执行相同操作，任何建议都将受到赞赏

http://jsfiddle.net/4ushz5y9/

由于

var expanded = 0;

    $( ".container ul li" ).click(function(e) {
      e.preventDefault();

      var clicked = $(this).attr("id");

      if (clicked == expanded){
        $( ".expanded" ).slideUp("slow", function(){
            $(".expanded").remove();
            expanded = 0;
          });      
      }else if (expanded == 0){
        $(".container ul #"+Math.ceil(clicked/4)*4).after('<li class="expanded"><div>abc</div></li>');
        $( ".expanded" ).slideDown("slow");



        expanded = clicked;
      }else{
        $( ".expanded" ).slideUp("slow", function(){
          $(".expanded").remove();
          $(".container ul #"+Math.ceil(clicked/4)*4).after('<li class="expanded"><div>abc</div></li>');


          $( ".expanded" ).slideDown("slow", function(){      
            expanded = clicked;


          });      
        });
      }   
    });