動畫文本滑動並使用jQuery替換另一個文本

Question

我想創建一個數據動態更改的網站。我想以動畫格式顯示數據，就像文本向上移動，另一個文本從底部移動到另一個位置。

喜歡在這個網站http://www.moneycontrol.com/。

股票上漲並被另一股票替代的方式。有沒有類似於這個jQuery插件或我可以實現這一目標的任何方式？

在此先感謝。

Answer 1

我不知道任何jQuery插件，可以爲你做這個的，但如果你喜歡它刺，這是你需要什麼：

1. 新舊數據集
2. 兩個元件（div或任何）對舊和新數據顯示

假設A元素是當前被顯示的一個，並且元素B是下一個將滑入。

將兩者都放入一個容器元素C，使用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(); 
});