让 DIV 慢慢移出屏幕答案

【问题标题】：Make a DIV slowly move offscreen让 DIV 慢慢移出屏幕
【发布时间】：2013-03-05 20:19:17
【问题描述】：

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

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

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

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

【问题讨论】：

标签： jquery css jquery-animate

【解决方案1】：

这里的主要问题是使用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（带有其他行为）

【讨论】：

【解决方案2】：

<!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 是要移动的距离 slow 是速度（慢、中、快或者您可以输入毫秒数）

【讨论】：