使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缓慢移出屏幕

回答

相关问题