动画文本滑动和替换为另一个文本使用jquery

Animate text to slide up and replace with another text using jquery

本文关键字：文本 另一个 jquery 替换 动画      更新时间：2023-09-26

我试图创建一个网站，其中的数据是动态变化的。我想以动画形式显示数据，比如文本向上移动，另一个文本从底部出现。

就像在这个网站http://www.moneycontrol.com/.

股票上涨后被另一只股票取代的方式。是否有任何类似的jquery插件或任何方式，我可以实现这一点?

我不知道有什么jQuery插件可以帮你做到这一点，但如果你想尝试一下，这就是你需要的:

  1. 您的新旧数据集
  2. 两个元素(div或其他)用于old和new数据显示

假设元素A是当前正在显示的元素，元素B是下一个要滑动的

将它们放置在容器元素C和overflow:hidden; position:relative中，并使它们向上滑动。

一旦A不在视图中(top: <负值>)，B在视图中(top: 0)，将A删除，并在B之后重新插入，并继续循环。

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();
});
相关文章：