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++;
        }
      });
    });
  });
});

スライドをスムーズにするにはどうすればよいですか？