Question

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

使用下面的代码，除右侧外，我的一切都正常。现在，它只是消失了（我希望它优雅地从右侧滑落）。

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>

CSS

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

JS

$("#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();
});

Answer 1

<!DOCTYPE html>
<html>
<head>
  <style>
div {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block"></div>

<script>
$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "slow");
});

$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});

</script>

</body>
</html>

直接从http://api.jquery.com/animate/

复制

50px是将要移动的距离慢是速度（慢，中，快或你可以输入几毫秒）

Answer 2

这里的主要问题是使用float: left基本上否定了white-space: nowrap的影响。

如MDN的float条目所述：

由于float隐式暗示使用块布局，因此会进行修改在某些情况下display值的计算值

要执行所需的功能，请先更改winner的CSS属性，以删除float并拥有display: inline-block。

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

然后修改JavaScript以处理inline-block并仅在滑动动画完成后删除最后一个获胜者。

$("#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();
        }
    });
});

DEMO

ALTERNATE DEMO（附加行为）

让DIV慢慢移动到屏幕外

2 个答案: