jquery - 如何修复 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++;
        }
      });
    });
  });
});

如何使滑动更顺畅？