[UserQ]

Есть 3 элемента на странице (ul li), необходимо при нажатии стрелки влево левый элемент анимированно уходит влево, в это же время он появляется с правой стороны, тоже анимированно. Просто ротацию элементов получилось сделать, а вот чтобы оно работало анимированно не получается.
Если жать влево приблизительно то что надо сделано, но есть проблемы которые не знаю как решить, если в право то работает как предполагалось, но нету анимированния.

<div class="wrapper">
    <a class="arrow-left left" href="#">&lt;</a>
    <div class=slider>
        <ul>
            <li class="red"></li>
            <li class="black"></li>
            <li class="yellow"></li>
        </ul>
    </div>
    <a  class="arrow-right right"  href="#">&gt;</a>
</div>

(function($) {

    var options = {
        leftBtn: '.arrow-left',
        rightBtn: '.arrow-right',
        animationSpeed: 5,
    };

    var methods = {
        init : function(options) {
            var option = $.extend({
                leftBtn: '.arrow-left',
                rightBtn: '.arrow-right',
                animationSpeed: 5
            }, options);
            var $leftArrow = $(option.leftBtn);
            var $rightArrow = $(option.leftBtn);
            $( '.arrow-left' ).bind( 'click', methods.left );
            $( '.arrow-right').bind( 'click', methods.right );
        },
        left : function() {
            var $self = $('.arrow-left');
            var $parent = $self.closest('.wrapper');
            var $ul = $parent.find('ul');
            var $first = $ul.find('li').first();
            $first.clone().appendTo($ul);
            $ul.find('li').animate({left: "-=100"}, 800, function() {
                //$first.remove();
            });

            //$first.remove();
        },
        right : function() {
            var $self = $('.arrow-right');
            var $parent = $self.closest('.wrapper');
            var $ul = $parent.find('ul');
            var $first = $ul.find('li').last();
            $first.clone().prependTo($ul);
            $first.remove();
        },
        destroy : function() {
            $( '.left' ).unbind( 'click', methods.left );
            $( '.right').unbind( 'click', methods.right );
        }
    };

    $.fn.mySlider = function(method) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error(method + ' doesn\'t exist for plugin jQuery.mySlider' );
        }
    };

})( jQuery );

$('.wrapper').mySlider();

http://jsfiddle.net/GmanG/hb9m42rc/1/

Спасибо.