3

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

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

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

2 回答 2

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

于 2013-03-05T20:26:26.827 回答
1

这里的主要问题是 usingfloat: left基本上否定了white-space: nowrap.

float如来自 MDN的条目中所述：

由于float隐含地暗示使用块布局，它display在某些情况下会修改值的计算值

要执行您想要的功能，首先将 CSS 属性更改为winnerremovefloat和 have display: inline-block。

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

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

演示

替代演示（带有其他行为）

于 2013-03-05T22:37:13.560 回答