动画Prepend和附加浮动

Question

这看起来非常简单，但我遇到了最糟糕的时间。我有以下代码处理以下div。希望为滑块设置动画，使它看起来像是逐渐向前推进，但是当我在.animate() $(".person")上使用<div id="people-reel"> <div class="person" id="alex"></div><!-- end #alex --> <div class="person" id="jenna"></div><!-- end #jenna --> <div class="person" id="martha"></div><!-- end #martha --> <div class="person" id="matt"></div><!-- end #matt --> <div class="person" id="mia"></div><!-- end #mia --> <div class="person" id="rich"></div><!-- end #rich --> <div class="person" id="ryan"></div><!-- end #ryan --> <div class="person" id="silvia"></div><!-- end #silvia --> <div class="person" id="tony"></div><!-- end #tony --> </div><!-- end #people-reel --> <div class="controller" id="left-controller"></div><!-- end #left-controller --> <div class="controller" id="right-controller"></div><!-- end #left-controller --> 时，项目会有动画效果，然后会附加额外的div，所有内容都会超过我想要它。我的目标是使滑块逐渐前进其中一个图像的宽度，即12.5％

HTML：

#people-reel {
    width: 120%;
    left: -10%;
    background: rgba(255,255,255,0.3);
    height: 200px;
    position: absolute;
    bottom: 15%;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

#alex {background-image: url('img/our-team/alex.jpg');}
#jenna {background-image: url('img/our-team/jenna.jpg');}
#martha {background-image: url('img/our-team/martha.jpg');}
#matt {background-image: url('img/our-team/matt.jpg');}
#mia {background-image: url('img/our-team/mia.jpg');}
#rich {background-image: url('img/our-team/rich.jpg');}
#ryan {background-image: url('img/our-team/ryan.jpg');}
#silvia {background-image: url('img/our-team/silvia.jpg');}
#tony {background-image: url('img/our-team/tony.jpg');}

.person {
    height: 200px;
    width: 12.5%;
    background-image: url('img/our-team/mia.jpg');
    background-size: cover;
    background-position: center;
    float: left;
    display: inline-block;
    cursor: pointer;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

CSS：

function moveToLeft(){
    $("#left-controller").on("click", function(){       
        var firstElement = $(".person").first();
        $("#people-reel").append(firstElement);
    });
}
function moveToRight(){
    $("#right-controller").on("click", function(){      
        var firstElement = $(".person").last();
        $("#people-reel").prepend(firstElement);
    });
}

moveToLeft();
moveToRight();

JavaScript的：

{{1}}

Answer 1

非常感谢Webkit的指针！以下代码有效：

function moveToLeft(){
    $("#left-controller").on("click", function(){       
        var firstElement = $(".person").first();
        var inc = $("#people-reel").width() * 0.125;
        firstElement.animate({'width': "0"}, "fast");
        setTimeout(function(){$("#people-reel").append(firstElement);}, 1000);
        setTimeout(function(){firstElement.animate({'width': inc}, 0);}, 1000);
    });
}
function moveToRight(){
    $("#right-controller").on("click", function(){      
        var lastElement = $(".person").last();
        var inc = $("#people-reel").width() * 0.125;
        lastElement.animate({'width': "0"}, "fast");
        setTimeout(function(){$("#people-reel").prepend(lastElement);}, 500);
        setTimeout(function(){lastElement.animate({'width': inc}, 0);}, 500);
    });
}

moveToLeft();
moveToRight();