動畫文本以向上滑動並使用jquery替換為其他文本

Question

我正在嘗試創建一個網站，其中的數據是動態更改的。 我想以動畫格式顯示數據，例如文本向上移動，而另一文本從底部開始出現。

就像在此網站http://www.moneycontrol.com/一樣 。

股票滑落並被其他股票取代的方式。 是否有任何類似於此的jquery插件或可以實現此目的的任何方式？

提前致謝。

Answer 1

我不知道有任何jQuery插件可以為您做到這一點，但是如果您喜歡它的話，這就是您所需要的：

1. 您的新舊數據集
2. 用於顯示舊數據和新數據的兩個元素（ div或其他元素）

假設元素A是當前顯示的元素，元素B是將要顯示的下一個元素。

將它們都放在容器元素C ，並帶有overflow:hidden; position:relative overflow:hidden; position:relative並設置動畫使其向上滑動。

一旦A不在視圖中（頂部：<負值>）並且B在視圖中（頂部：0），則將A移除並在B之后重新插入，然后繼續循環。

Answer 2

jQuery有一個slideUp（）選項，可用於簡單的解決方案。 這是一些示例代碼和小提琴，說明了您所想到的內容的非常基本的版本。 https://jsfiddle.net/adrianopolis/ezzLgLhy/

HTML：

<div class="slide-up-container">
    <div class="slide-up-item" id="el_one">
        Foo
    </div>
    <div  class="slide-up-item" id="el_two">
        Bar
    </div>
</div>

<a id="foo_bar" href="#">Replace Foo with Bar</a>

CSS：

.slide-up-container {
    border: 1px solid black;
    height:100px;
    overflow: hidden;
    background-color: #FFF;
}
.slide-up-item {
    height: 100px;
    padding: 20px;
    font-size: 20px;
    color: white;
}
#el_one {
    background: blue;
}
#el_two {
    background: red;
}

jQuery的：

$("#foo_bar").click(function(){
    $("#el_one").slideUp();
});