Question

我正在尝试创建一个动态更改数据的网站。我希望以动画格式显示数据，例如文本向上移动，另一个文本从底部出现。

与此网站http://www.moneycontrol.com/类似。

股票向上滑动并被另一股股票取代的方式。有没有类似于这个的jquery插件或我可以实现的任何方式？

提前致谢。

Answer 1

我不知道任何可以为你做这件事的jQuery插件，但如果你喜欢它，这就是你需要的：

您的新旧数据集
旧和新数据显示的两个元素（zone.js:158 Uncaught Error: Sys.ParameterCountException: Parameter count mismatch.(…) Error$create @ ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:237 Error$parameterCount @ ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:413 Function$_validateParameterCount @ ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:118 Function$_validateParams @ ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:70 String$startsWith @ ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:491 startsWith @ es6.string.starts-with.js:15Sys$UI$DomEvent @ ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:3986 browserHandler @ ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:4052 ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154ZoneTask.invoke @ zone.js:335或其他）

假设元素A是当前正在显示的元素，而元素B是将滑入的 next 。

将它们放在一个容器元素div中，并带有C并动画显示它们以便向上滑动。

一旦overflow:hidden; position:relative超出视图（顶部：＆lt;负值＆gt;）并且A在视图中（顶部：0），请删除B并在之后重新插入A，并继续循环。

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

动画文本以使用jquery向上滑动并替换为另一个文本

2 个答案: