jQuery：如何顯示文本並隱藏然後顯示另一個？

Question

我試圖顯示三行文本，每行必須在預覽行隱藏後顯示。

這是我的html代碼：

<p id="line1">First Line</p> 
<p id="line2">Second Line</p> 
<p id="line3">Third Line</p> 

我想顯示（一號線），等待5秒鐘，然後我想隱藏它，顯示下一行後，等待5秒鐘，隱藏

$('#line1').show().delay(5000).hide(); 
$('#line2').show().delay(5000).hide(); 
$('#line3').show().delay(5000).hide(); 

所有的人，一起展示並隱藏起來：這...等等

的問題時，我用的就是。我希望把它在隊列中，第一個，然後第二.....等

我需要你的幫助

Answer 1

做他們inside success callback

function cycle() { 
    $("#line1").show().delay(5000).hide(function() { 
    $("#line2").show().delay(5000).hide(function() { 
     $("#line3").show().delay(5000).hide(cycle); 
    }); 
    }); 
} 
cycle(); 

---

你可以使它更使用數組的id很簡單。

var arr = ["#line1", "#line2", "#line3"] 
i = 0; 

function cycle() { 
    $(arr[i]).show().delay(5000).hide(cycle); 
    i = (i + 1) % arr.length; 
} 
cycle(); 

---

如果有id爲許多元素開始line然後像做

var $ele = $('[id^="line1"]'), 
i = 0; 

function cycle() { 
    $ele[i].show().delay(5000).hide(cycle); 
    i = (i + 1) % arr.length; 
} 
cycle(); 

Answer 2

必須使用setInterval()實現這個..

Answer 3

我認爲，案文應完成後循環。這是一個使用jquery的解決方案。

https://jsfiddle.net/qaLkmwdk/

<p id="line-1">First Line</p> 
<p id="line-2">Second Line</p> 
<p id="line-3">Third Line</p> 
<script> 
    var divs = $('p[id^="line-"]').hide(), 
    i = 0; 

(function cycle() { 

    divs.eq(i).fadeIn(400) 
       .delay(5000) 
       .fadeOut(400, cycle); 

    i = ++i % divs.length; 

})(); 
</script> 

Answer 4

試試這個

$("document").ready(function() { 
 
    test(); 
 

 
    function test() { 
 
    $('#line1').show().delay(5000).hide(function() { 
 
     $('#line2').show().delay(5000).hide(function() { 
 
     $('#line3').show().delay(5000).hide(function() { 
 
      test(); 
 
     }); 
 
     }); 
 
    }); 
 
    } 
 
});

#line1, 
 
#line2, 
 
#line3 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="line1">First Line</p> 
 
<p id="line2">Second Line</p> 
 
<p id="line3">Third Line</p>

Answer 5

試試這個，所有的p標籤內容到另一個DIV替換一個div的內容。

jsFiddle

<div class="viewer"> 
<p id="showme"></p> 
</div> 
<div class="box"> 
<p id="line1">First Line</p> 
<p id="line2">Second Line</p> 
<p id="line3">Third Line</p> 
<p id="line4">First Line</p> 
<p id="line5">Second Line</p> 
<p id="line6">Third Line</p> 
</div> 

腳本

var allP = $('div.box p').siblings(); 
var i = 0; 
var allPsize = allP.size(); 
var idSetIntervall = setInterval(function() { 
$('#showme').text($(allP[i]).text()); 
i++; 
if (i>=allPsize){ 
    clearInterval(idSetIntervall); 
} 
}, 1000); 

CSS

div.box p{ 
    display:none; 
}