3

最近の勝者がリストされたスコアボードを作成したいと思います。新しい勝者が発表されたら、現在の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 は速度です (slow、medium、fast またはミリ秒数を入力できます)

于 2013-03-05T20:26:26.827 に答える