Анимированное смещение элемента по событию

var slides = $('.slides'),
    opts = {
        left: ['div:first', 'appendTo'],
        right: ['div:last', 'prependTo']
    };
$('.arrow').on('click', function(){
    var dir = $(this).hasClass('left') ? 'left' : 'right';
    $(opts[dir][0], slides)[opts[dir][1]](slides);    
});

var slides = $('.slides'),
    slOffset = slides.position(),
    pT = slOffset.top,
    pL = slOffset.left,
    pR = slides.width(),
    pB = pT + slides.height(),
    opts = {
        moveLeft: ['div:first', 'prependTo', 'appendTo'],
        moveRight: ['div:last', 'appendTo', 'prependTo']
    },
    delay = 250,
    flag = false;
$('.slider').on('click', '.arrow', function () {
    if(flag) return false;
    flag = true;
    var dir = $(this).hasClass('left') ? 'moveLeft' : 'moveRight',
        mDiv = $(opts[dir][0], slides),
        cDiv = mDiv.clone();
    /* 
    * Добавляем клонированный элемент
    * и скрываем перемещаемый элемент
    */
    cDiv[opts[dir][1]](slides).addClass('clone').css({
        left: mDiv.position().left
    });
    mDiv.addClass('hidden');
    /* 
    * Пошаговая анимация перемещения
    */
    mDiv.hide(delay);
    cDiv.animate({
        top: pB
    }, 250, function(){
        $(this).animate({
            left: (dir == 'moveLeft' ? pR - $(this).innerWidth() : 0)
        }, delay*2, function(){
            mDiv[opts[dir][2]](slides).show(delay, function(){
                cDiv.animate({
                    top: 0
                }, delay, function(){
                    $(this).remove();
                    mDiv.removeClass('hidden');
                    flag = false;
                });
            });
        });
    });    
});