javascript - 用浮点数对动画进行前置和追加

这似乎很简单，但是我经历了最糟糕的时光。我在以下div上使用以下代码。很想为滑块设置动画，以使其看起来像是逐渐向前移动，但是当我在.animate()上使用$(".person")时，这些项目将进行动画处理，然后附加了div，最终一切都比我想要的前进得多。我的目标是使滑块逐渐推进其中一张图像的宽度，即12.5％

HTML：

<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 -->

CSS：

#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;
}

JavaScript：

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();

最佳答案

非常感谢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();

关于javascript - 用浮点数对动画进行前置和追加，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24772704/