Jquery 使DIV慢慢移离屏幕

我想创建一个记分板，列出最近的获奖者。当宣布新的获奖者时，我希望当前的三位获奖者向右滑动，新的获奖者从左侧滑动到位，最老的获奖者（最右边的）滑出屏幕

有了下面的代码，除了右边，我的一切都正常工作了。现在，它就消失了（我希望它优雅地从右侧滑下）

HTML

<div id="results-wrapper">
    <div class="contest-results" id="recent-winners">Recent winners:</div>
    <div class="contest-results" id="winner-wrapper">
        <div class="winner">John</div>
        <div class="winner">Katie</div>
        <div class="winner">Peter</div>
    </div>
</div>

JS

#results-wrapper {
    display:inline-block;
    padding: 6px 3px 4px 3px;
    font-size: 16px;
}
.contest-results {
    float:left;
}
#recent-winners {
    width: 120px;
    text-align: left;
}
#winner-wrapper {
    width: 444px;
    height: 20px;
    white-space: nowrap;
    overflow: hidden;
}
.winner {
    text-align: center;
    width: 148px;
    float:left;
    position: relative;
    display: inline;
}

$("#winner-wrapper").on("click", ".winner", function() {
    $('.winner:first').before('<div style="display: none;" class="winner">justin</div>');
    $('.winner').css({"display" : "inline", "left" : "-148px"});
    $('.winner').animate({"left" : "0px"}, {duration : 600, easing : "swing"});
    $('.winner:last').remove();
});

$（“#赢家包装”）。在（“单击”，“赢家”，函数（）上{
$（'winner:first'）。在（'justin'）之前；
$（'.winner'）.css（{“display”：“inline”，“left”：“-148px”}）；
$（'.winner'）.animate（{“left”：“0px”}，{持续时间：600，放松：“swing”}）；
$（'.winner:last'）.remove（）；
});

div{
位置：绝对位置；
背景色：#abc；
左：50px；
宽度：90px；
高度：90px；
保证金：5px；
}
&拉阔&拉阔；
$（“#右”）。单击（函数（）{
$（“.block”）.animate（{“left”：“+=50px”}，“slow”）；
});
$（“#左”）。单击（函数（）{
$（“.block”）.animate（{“left”：“-=50px”}，“slow”）；
});

直接从

50px是将要移动的距离

---

slow是速度（慢、中、快或可以输入毫秒数）

这里的主要问题是使用

float:left

从本质上否定了

空白：nowrap

的效果

如来自MDN的条目所述：

由于

float

隐含地暗示了块布局的使用，因此它会修改 在某些情况下，

的计算值显示

值

要执行所需的功能，请首先更改

winner

的CSS属性，以删除

float

并使

显示：内联块

.winner {
    text-align: center;
    width: 148px;
    position: relative;
    display: inline-block;
}

然后修改JavaScript以处理

内联块

，并仅在滑动动画完成后删除最后一个赢家

$("#winner-wrapper").on("click", ".winner", function () {
    var first = $(".winner").first();
    var last = $(".winner").last();
    first.before('<div style="display: none;" class="winner">justin</div>');
    $('.winner').css({
        "display": "inline-block",
        "left": "-148px"
    });
    $('.winner').animate({
        "left": "0px"
    }, {
        duration: 600,
        easing: "swing",
        complete: function () {
            last.remove();
        }
    });
});

$（“#赢家包装”）。在（“单击”，“赢家”，函数（）{
var first=$（“.winner”）.first（）；
var last=$（“.winner”）.last（）；
首先，在“贾斯汀”之前；
$（'.winner'）.css({
“显示”：“内联块”，
“左”：“-148px”
});
$（'.winner'）。设置动画({
“左”：“0px”
}, {
持续时间：600，
放松：“挥杆”，
完成：函数（）{
最后，删除（）；
}
});
});

（有其他行为）

$("#winner-wrapper").on("click", ".winner", function () {
    var first = $(".winner").first();
    var last = $(".winner").last();
    first.before('<div style="display: none;" class="winner">justin</div>');
    $('.winner').css({
        "display": "inline-block",
        "left": "-148px"
    });
    $('.winner').animate({
        "left": "0px"
    }, {
        duration: 600,
        easing: "swing",
        complete: function () {
            last.remove();
        }
    });
});