如何在jquery动画期间修复抽搐效果？

Question

我有4个不同高度的div，一个接一个地排列 当我点击任何这些div时，它应向左滑动并隐藏，然后相邻的div滑入前div位置。目前div的滑动是有效的，但存在某种对齐问题，这并没有使转换顺利进行

工作代码位于此jsfiddle。

$(document).ready(function() {          
  $('.screenWrapper').click(function(){

    $("div.screenWrapper[data-messagetype='" + $('#msgStatusTitle')
      .html() + "']")
      .css({'opacity':1,'width':50});

    $("div.screenWrapper[data-messagetype='" + $('#msgStatusTitle')
      .html() + "']")
      .show();

    var msgTitle = $(this).attr('data-messageType');
    $('#msgStatusTitle').html(msgTitle);

    //$(this).hide();
    $(this).animate({
     'width'   : 0,
     'opacity' : 0
    }, 750, function() {
      $(this).hide();
      var cntr = 1;

      $('.screenWrapper').each(function(i, obj) {
        obj = $(obj);
        if(obj.css('display') != 'none') {
          obj.attr('class', 'screenWrapper block' + cntr);
          cntr++;
        }
      });
    });
  });
});

如何使滑动更顺畅？