javascript - 時限テキストスワップ？

Question

テキストの段落をjavascript/jQueryと交換することは可能ですか？約5秒の遅延タイマーが必要です。そうすると、テキストが画像スライドなどの他のテキストに切り替わります。フェードやエフェクトがあれば素晴らしいでしょうが、うまくいくものは何でも。私を正しい方向に向けてください、または私を助けてくれませんか？

Answer 1

どうぞ

setTimeoutを使用して関数を呼び出すこともできます

編集：

これは、クリックなしで間隔を空けて調整されたデモです

編集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>

Answer 2

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

そしてあなたがそれをさらに進めたいのなら

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

Answer 3

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

Answer 4

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

changetextを実装して、次の関数内で反復する文字列の配列を作成できます。

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

Answer 5

フェードインしたいコンテンツ（名前を付けることができます#box）をのすぐ上に置きます<p>。で非表示にしdisplay:none;ます。次に、たとえば次を使用します。

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