jquery - 你如何让文本每 __ 秒改变一次？

Question

这个网站： http: //www.twosides.co/在它的主页上，如果你看几秒钟，文字会不断变化，效果非常棒。有人有想法这样做吗？

我完全不知道该怎么做，所以我来到 stackoverflow 社区寻求帮助！

感谢所有回答的人！

Answer 1

这样的事情会改变消息：

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$(function () {
    var messages = [],
        index = 0;

    messages.push('Message 1');
    messages.push('Message 2');
    messages.push('Message 3');

    function cycle() {
        $('#some-id').html(messages[index]);
        index++;

        if (index === messages.length) {
            index = 0;
        }

        setTimeout(cycle, 3000);
    }

    cycle();
});
</script>
<div id="some-id"></div>

只需添加一些动画代码。

Answer 2

从源代码看来，他们正在使用Masonry。一般来说，这可以在 jQuery 中使用animate 函数相当容易地完成。

这是一个带有动画的示例实现。它使用 tmp 元素来确定文本宽度。

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$(function () {
    var messages = [],
        index = 0;

    messages.push('I am short.');
    messages.push('Longer messages are nice.');
    messages.push('And short again.');

    var tmp = $('#tmp');
    var el = $('#el');
    function cycle() {
        var i = index%message.length;
        tmp.html(messages[i]);
        el.html('').animate({width: tmp.width()+1}, function() {
            el.html(messages[i]);
            index++;
            setTimeout(cycle, 3000);
        });
    }
    cycle();
});
</script>
<style>
#tmp {
    visibility: hidden;
}
</style>
I am a text. <span id="el"></span> Me too.
<span id='tmp'>foo<span>

Answer 3

要每 x 秒更改一次文本，您应该使用 delay(x);

所以：

$("#yourElem").delay(1000).text("Text changed");

你必须把这段代码放在一个循环中......

Answer 4

更新：

查看twoSides代码的工作版本的注释

我刚刚在我的个人网站上使用 vanilla JS 和一些 CSS实现了类似的东西。这是该代码的修改版本以适应这些目的。

var seconds = 5;
var madlibs = {
  'a': ['eat pie', 'jump rope', 'write code', 'do things'],
  'b': ['a fork', 'your friends', 'the quickness', 'other things']
};
var madlibA = document.getElementById('a');
var madlibB = document.getElementById('b');

function rand(x) {
  return Math.floor(Math.random() * x);
}

function change() {
  var txtA = madlibs['a'][rand(madlibs['a'].length)];
  var txtB = madlibs['b'][rand(madlibs['b'].length)];
  madlibA.innerHTML = txtA;
  madlibB.innerHTML = txtB;
  madlibA.classList.remove('flip');
  madlibB.classList.remove('flip');
}

function reveal() {
  madlibA.classList.add('flip');
  madlibB.classList.add('flip');
  setTimeout(change, 500); // half-second like in CSS
}
setInterval(reveal, seconds * 1000);

.madlib {
  transition: all 0.5s linear;
  font-size:1rem;
  color:black;
}
.flip {
  font-size:0px;
  color:transparent;
}

<p>
  we make it easy to <span id="a" class="madlib">do things</span> with <span id="b" class="madlib">other things.</span>
</p>

过渡并不完全相同，因为我还没有找到使用 css3 实现 slideDown 效果的好方法（overflow在inline-block元素上设置会使文本不对齐）

在 JS 中设置秒比你看到的要短 1 秒，因为动画需要 0.5 秒进出，所以要相应地计划。

原始答案：

您可以使用setInterval定期调用函数，或setTimeout在一段时间后调用函数。

所以你可以做

function changeText(){
    // code to change the text
}
setInterval(changeText,500);

或者

function changeText(){
    // code to change text
    setTimeout(changeText,500);
}
changeText();

让函数在一段时间后自行调用。

要更改文本，您可以使用如下选项数组：

var sentences = ["test 1", "test 2", "test 3"],
    iter = 0,
    changeEl = document.getElementById("change");

function changeText(){
    changeEl.innerHTML = sentences[iter%sentences.length];
    iter++;
    setTimeout(changeText,500);
}
changeText();

对于动画，您可以将此技术转换为与 jQuery 或 mootools 等库一起使用。

---

编辑：

我还没有测试过这些，但看起来他们使用的代码是这样的：

html:

    <div id="madlib-sentence">
        <span class="twosides">TwoSides</span> makes it easy to
        <div class="madlibs" style="width:400px;">
            <ul id="madlibs-verbs">
                <li class="madlibs-verb"><span>discuss and debate contentious topics</span></li>
                <li class="madlibs-verb"><span>see every side of an issue</span></li>
                <li class="madlibs-verb"><span>compare your viewpoints</span></li>
            </ul>
        </div> with 
        <div class="madlibs" style="width:100px;">
            <ul id="madlibs-nouns">
                <li class="madlibs-noun"><span>friends.</span></li>
                <li class="madlibs-noun"><span>the world.</span></li>
                <li class="madlibs-noun"><span>co-workers.</span></li>
                <li class="madlibs-noun"><span>family.</span></li>
            </ul>
        </div>
    </div>

CSS：

#primary p .madlibs-verb,#primary p .madlibs-noun {
    font-family:HelveticaNeue,'Helvetica Neue',HelveticaNeueRoman,HelveticaNeue-Roman,'Helvetica Neue Roman',TeXGyreHerosRegular,Helvetica,Arial,sans-serif;
    font-weight:bold;
    font-style:normal;
 }

#primary #madlib-sentence {
    margin-top:20px;
    color:#f1f1f1;
    text-shadow:0 0 2px #000;
    font-size:19px;
    font-style:italic;
}

#primary #madlib-sentence .madlibs {
    display:inline-block;
    position:relative;
    height:19px;
    overflow:hidden;
    padding-bottom:3px;
    margin-bottom:-3px;
}

#primary #madlib-sentence .madlibs ul {
    position:absolute;
    left:0;
    top:0;
    list-style-type:none;
}

#primary #madlib-sentence .madlibs ul .madlibs-verb,#primary #madlib-sentence .madlibs ul .madlibs-noun {
    line-height:24px;
    padding-bottom:30px;
    font-family:HelveticaNeue,'Helvetica Neue',HelveticaNeueRoman,HelveticaNeue-Roman,'Helvetica Neue Roman',TeXGyreHerosRegular,Helvetica,Arial,sans-serif;
    font-weight:bold;
    font-style:normal;
}

#primary #madlib-sentence .madlibs ul .madlibs-verb span,#primary #madlib-sentence .madlibs ul .madlibs-noun span {
    white-space:nowrap;
}

JS：

function animate_madlib(container) {
    if (typeof container.data("index") === "undefined") {
        container.data("index", 0);
    }
    index = container.data("index") + 1;
    if (index == container.children().length) {
        index = 0;
    }
    current_child = container.children().eq(index);
    parent = container.parent();
    new_width = current_child.children("span").outerWidth();
    if (new_width > parent.width()) {
        parent.animate({width: new_width+"px"}, 100, "swing", function() {
            container.animate({top: -(index*current_child.outerHeight())}, 1000, "easeInOutQuint");
        });
    }
    else {
        container.animate({top: -(index*current_child.outerHeight())}, 1000, "easeInOutQuint", function() {
            parent.animate({width: new_width+"px"}, 100, "swing");
        });
    }
    container.data("index", index);
    new_container = (container.attr('id') == 'madlibs-verbs' ? $('#madlibs-nouns') : $('#madlibs-verbs'));
    setTimeout(function(new_container) {animate_madlib(new_container)}, 2500, new_container);
}

$(document).ready( function() {
    // madlib
    $('.madlibs').each(function() {
        $(this).css("width", $(this).find("span:first").outerWidth());
    });
    setTimeout(function(){animate_madlib($('#madlibs-verbs'))}, 1500);
});​