使DIV緩慢移出屏幕

我想創建一個記分牌，列出最近的獲勝者。當新獲勝者宣佈時，我希望三名當前獲勝者向右滑動，新獲勝者從左側滑入到位，最老的獲勝者（最右側）滑出屏幕。使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>

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

來源

2013-03-05 Justin Cloud

這裏的主要問題是， 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（用另外的行爲）

來源

2013-03-05 22:37:13

<!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>

直接從

50px的複製是將移動緩慢的距離的速度（慢速，中速，快速或您可以輸入一個毫秒數），使用

來源

2013-03-05 20:26:26 mabdrabo

使DIV緩慢移出屏幕

回答

相關問題