Javascript 如何每n秒将一个新字符串从数组滑入一个句子？

如何将文本滑出和滑入以替换句子中的一个单词

这是一句话：

<p>Lorem <span>ipsum</span> dolor sit.</p>

如何用数组中的下一个单词替换（我希望通过

.slideUp（）

）现有单词

我希望最终结果有点像里程表的工作方式，但有文字。有道理吗

你能给我指一下正确的方向吗？

我想你可以试试

var myArr = new Array('ipsum','alpha','beta','gamma','delta','epsilon');

myArr.push(myArr.shift());

• myArr.shift（）提供“ipsum”
• push（）将其放在最后

编辑：

好的，Ryan，这里有一个解决方案，您可以使用更好的动画，但这是为了示例。 我首先错在pop（）上，因为这里需要的是shift（）！（同时编辑）

在html中使用此选项：

---

jsiddle:

在不为您编写代码的情况下，我为您准备了一个简短的文本切换示例。我使用了

.slideUp（）

来提供动画，但如果您想要更精细的控制并使其更像里程表，则可能需要使用

.animate（）

。我希望这能让你对如何实现这一目标有所了解

粗略的HTML

<div class="widget-container">
    <p>Lorem</p>
    <div class="widget-vert-rotate">
        <!-- jQuery elements will be here -->
    </div>
    <p>dolor sit amet.</p>
</div>

还有JS+jQuery

var words = ['ipsum','nunc','telum'],
    i = 0,
    l = words.length,
    el = $('.widget-vert-rotate'),
    t = 3000;

// Create the text elements
for ( ; i < l ; i++ ) {
    $('<p />').text(words[i]).appendTo(el);
}

// Set the interval function
var itv = setInterval(function() {
    var child = el.children().first();
    child.slideUp(1000, function() {
        child.remove();

        el.append(
            $('<p />').text(child.text())
        );
    });
}, t);

var words=['ipsum'、'nunc'、'telum']，
i=0，
l=字数。长度，
el=$（'.widget垂直旋转'），
t=3000；
//创建文本元素
对于（；i'）。文本（字[i]）。附录（el）；
}
//设置间隔函数
var itv=setInterval（函数（）{
var child=el.children（）.first（）；
slideUp（1000，函数（）{
child.remove（）；
附加(
$（'
'）.text（child.text（））
);
});
}，t）；

或Cycle看起来不错，但我不想为一个简单的问题添加复杂的插件。OP也在寻找单词的动画。是的，它做得还不够，但即使是pop，push也很有帮助。我需要为每个人做一个

和
.slideup（）有什么建议吗？向上投票。克里斯，还有什么需要帮助的吗？我编辑了答案，希望你能找到足够的提示来做你想做的事。谢谢你的投票：）谢谢克里斯。我很好奇是什么把动画弄清楚的？动画向下推单词以隐藏，然后弹出。但是js没有说滑下。不客气。我猜。show（）就是这个窍门。在这些例子中，它也做了同样的动画，哈哈。太感谢你没有为我写代码了。这太棒了。谢谢
var myArr = new Array('ipsum ','alpha ','beta ','gamma ','delta ','epsilon ');
    loop();

    function loop() 
    {
        $("#mySpan").slideUp(3000, function(){
            myArr.push(myArr.shift());

            $("#mySpan").empty();
            $("#mySpan").append(myArr[0]);
            $("#mySpan").show(200);

            loop();
        });
    }   

<div class="widget-container">
    <p>Lorem</p>
    <div class="widget-vert-rotate">
        <!-- jQuery elements will be here -->
    </div>
    <p>dolor sit amet.</p>
</div>

.widget-container > * {
    display: inline-block;
    vertical-align: top;
    padding-right: 0.4em;
}

.widget-vert-rotate {
    overflow: hidden;
    height: 1.1em;
}

var words = ['ipsum','nunc','telum'],
    i = 0,
    l = words.length,
    el = $('.widget-vert-rotate'),
    t = 3000;

// Create the text elements
for ( ; i < l ; i++ ) {
    $('<p />').text(words[i]).appendTo(el);
}

// Set the interval function
var itv = setInterval(function() {
    var child = el.children().first();
    child.slideUp(1000, function() {
        child.remove();

        el.append(
            $('<p />').text(child.text())
        );
    });
}, t);