等到动画结束 - jquery滑块

Question

我正在为这个特定的项目构建一个jQuery Slider。我遇到的问题是我的代码在幻灯片过程中没有动画。它应该做的是，根据切换侧（左侧或右侧），它应该+ 100％右-100％。它完全按照我想要的方式制作动画，但它并没有“出”它应该如何。这是它的实时版本。 dev.designsbycamaron.net

Jquery Code。

$('section#tf-ipad-info .listofimages .slide:first').addClass('activeslide').appendTo('#tf-ipad-info .mid ul li.mid-image');
        $('section#tf-ipad-info .left-click').click(function(){
            $('.activeslide').removeClass('activeslide').animate({right : "+=100%"}, { complete: function(){
                $('section#tf-ipad-info .listofimages .slide:first').addClass('activeslide').appendTo('#tf-ipad-info .mid ul li.mid-image').css({right : "-100%"});
                    $('section#tf-ipad-info .activeslide').animate({right : "0"} , {complete: function(){

                        }
                    })
                }
            });
            $('section#tf-ipad-info .mid-image .slide:first').appendTo('section#tf-ipad-info .listofimages').removeClass('activeslide').removeAttr('style');
        });
        $('section#tf-ipad-info .right-click').click(function(){
            $('.activeslide').animate({right : "-=100%"}, { complete: function(){
                $('section#tf-ipad-info .listofimages .slide:first').addClass('activeslide').appendTo('#tf-ipad-info .mid ul li.mid-image').css({right : "+100%"});
                    $('section#tf-ipad-info .activeslide').animate({right : "0"} , {complete: function(){

                        }
                    })
                }
            });
            $('section#tf-ipad-info .mid-image .slide:first').appendTo('section#tf-ipad-info .listofimages').removeClass('activeslide').removeAttr('style');
        });

HTML CODE

<ul class="tbl rotater-img-main-content t-align-center">

                                <li class="tbl-cell left-click">
                                    <img src="images/left-arrow-clicker.png" alt="arrow"/>
                                </li>
                                <li class="tbl-cell mid-image ">

                                </li>
                                <li class="tbl-cell right-click">
                                    <img src="images/right-arrow-clicker.png" alt="arrow"/>
                                </li>
                            </ul>