CODEWITHSUNDEEP
javascriptjqueryhtml
mubarmg
mubarmg

Reputation: 47

jQuery : How can showint text and hide then showing another?

I'm trying to showing three lines of text , each line must to show after the previews line hide.

this is my html code:

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

I want to showing the (line1) and wait for 5 seconds then I want to hide it , After that showing the next line and wait for 5 seconds and hide it ... etc.

the problem is when I using :

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

all of them , showing together and hide together. I want to make it in queue , first one , then second ..... etc.

I need your help

Upvotes: 1

Views: 95

Answers (5)

giuseppe straziota
giuseppe straziota

Reputation: 443

Try this, replace a div content with all the p tags contents into another 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>

Script

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

Upvotes: 1

RanchiRhino
RanchiRhino

Reputation: 774

I believe the text should cycle through after completing. Here is a solution using 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>

Upvotes: 2

Pranav C Balan
Pranav C Balan

Reputation: 115272

Do them inside success callback

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

You can make it more simple using an id of array.

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

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

If there are many elements with the id start with line then do something like

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

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

Upvotes: 3

Krupesh Kotecha
Krupesh Kotecha

Reputation: 2412

Try this 

$("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>

Upvotes: 2

Sonu Bamniya
Sonu Bamniya

Reputation: 1115

You must use setInterval() to achieve this..

Upvotes: 1

Related Questions