如何用insertAfter和append做jquery动画

Question

我有以下代码，

    $('.carosel-control-right').click(function() {
      $(this).blur();
      $(this).parent().find('.carosel-item').first().insertAfter($(this).parent().find('.carosel-item').last());
    });

    $('.carosel-control-left').click(function() {
      $(this).blur();
      $(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first());
    });

$('.carosel-item').hover(function(){
    var number =$(this).attr('data-slide-to');       
    $('.hover-content-display .item').css('display', 'none');
    $('.hover-content-display .item[data-slide='+ number +']').css('display', 'block');
    $('.hover-content-display').append($('div[data-slide=' + number +']'));    
});

https://jsfiddle.net/3fhL2r42/

当我点击左侧或右侧图标时，我希望它向左或向右滚动，我该如何用动画做到这一点？ 我也喜欢在悬停功能上添加一些动画效果，但不知道如何将追加和动画结合在一起。