定时文本交换？答案

【问题标题】：Timed text swap?定时文本交换？
【发布时间】：2011-07-05 12:22:07
【问题描述】：

是否可以用 javascript/jQuery 交换一段文本？我想要一个大约 5 秒的延迟计时器，然后文本应该换成别的东西，比如图像幻灯片。带有淡入淡出或效果会很棒，但无论如何都可以。你能指出我正确的方向或帮助我吗？

【问题讨论】：

您使用什么标记？你已经尝试过什么？发生了什么，或者出了什么问题？你卡在哪一部分？
这里有什么stackoverflow.com/search?q=jquery+animate+delay
Jquery animation repeating code.的可能重复

【解决方案1】：

这里是如何在没有 setTimeout 或 setInterval 的情况下循环

<div id="textMessage"></div>
<div class="textContent" style="display:none">Lorem ipsum dolor sit amet</div>
<div class="textContent" style="display:none">In sit amet diam et arcu aliquam tincidunt. </div>

function slide() {
  if (cnt>=texts.length) cnt=0;
  $('#textMessage').html(texts[cnt++]);
  $('#textMessage')
    .fadeIn('slow').animate({opacity: 1.0}, 3000).fadeOut('slow',
     function() {
       return slide()
     }
  );      
}      
$(document).ready(function() {
  // save the texts in an array for re-use
  $(".textContent").each(function() {
    texts[cnt++]=$(this).text();
  });
  slide()  
});

【讨论】：

【解决方案2】：

setTimeout(function() {
  $('#target').html('New Text');
}, 5000); // <- 5 seconds

如果你想更进一步

setInterval(function() {
  // do some change that will happen every 5 seconds
}, 5000); // <- 5 seconds

【讨论】：

为什么不延迟和/或动画化？
谢谢，我会试试这个代码，是的。我希望它循环，所以代码很好。
我想这并不重要，但通常对于这么简单的事情，我更喜欢 setTimeout/setInterval，因为它对我来说更清楚一些。但就开销和/或其他好处而言，我想不出任何

【解决方案3】：

Here you go

你也可以用 setTimeout 调用函数

编辑：

Here is the tweaked demo, without a click and with interval

编辑 2：

复制粘贴的代码，以防 jsfiddle 出现故障。

<div class="texts">
  <p class="text text_1">text 1</p>
  <p class="text text_2">text 2</p>  
</div>

<script>
  setInterval(function(){
    var toggle = $(".text").hasClass("toggled");
    $(".text_1").animate({opacity: toggle ? 1 : 0});
    $(".text_2").animate({opacity: toggle ? 0 : 1});
    $(".text").toggleClass("toggled");
  }, 1000);
</script>

<style type="text/css">
.texts {
    position: relative;
}

.text {
    position: absolute;
    top: 0;
    left: 0;
}

.text_1{
    opacity: 1
}

.text_2{
   opacity: 0;
}
</style>

【讨论】：

为什么不添加一个回调让它循环和加载，这样就不需要点击了？
是的，你会怎么做呢？我希望它每 5 秒循环一次，无需点击。
我无法让它与循环一起工作，如果不点击按钮，有人知道如何实现吗？
你去jsfiddle.net/KepBX/1将计时器调整到任何你想要的。现在是 1 秒

【解决方案4】：

function changeText(){
     document.getElementById('my_div_id').innerHTML = 'text_to_display';
}

您可以实现 changetext 以获得一个字符串数组，您可以在下一个函数中对其进行迭代：

function timingex( ){
    setTimeout("changeText()",5000);
}

【讨论】：

避免评估：setTimeout(changeText,5000);

【解决方案5】：

将您想要淡入的内容（我们可以将其命名为#box）放在<p> 的正上方。用display:none; 隐藏它。然后使用例如：

function() {
    $("#box").delay(5000).fadeIn("slow");
}

【讨论】：