CODEWITHSUNDEEP
javascriptjquerysettimeout
James
James

Reputation: 145

setTimout with "hide / show" loop not working

I have 3 text items. All invisible by default. There is a button. When the user clicks the button, there should be a delay of 2sec and AFTER this delay, a loop should start with the 1st item visible first for 1sec, then fades out and then 2nd item appears for 1sec etc.

The loop works ok without setTimout.

But I cannot introduce that initial 2sec delay with setTimeout. (I need the 2sec. delay, it is essential for what I am doing)

WORKING VERSION, WITHOUT setTimeout: http://jsfiddle.net/Etienne79/tL3sgjzb/1/

var $elem = $('#main .trip'), l = $elem.length, i = 0, d = 1000;

$(function() {
  $('.testbtn').on('click', function() {

    
        function go() {
            $elem.eq(i % l).fadeIn(300, function() {
                // $elem.eq(i % l).fadeOut(1500, go);
                $elem.eq(i % l).delay(d).fadeOut(300, go)
                i++;
            })
        };
        go();
          


});
});
.trip { display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="testbtn">show</button>

<div id="main">
    <div id="1" class="trip">Item1</div>
    <div id="2" class="trip">Item2</div>
    <div id="3" class="trip">Item3</div>
</div>

NOT WORKING, WITH setTimout: http://jsfiddle.net/Etienne79/a4yw5ep0/3/

var $elem = $('#main .trip'), l = $elem.length, i = 0, d = 1000;

$(function() {
  $('.testbtn').on('click', function() {

    setTimeout(
    
        function go() {
            $elem.eq(i % l).fadeIn(300, function() {
                // $elem.eq(i % l).fadeOut(1500, go);
                $elem.eq(i % l).delay(d).fadeOut(300, go)
                i++;
            })
        };
        go();
        
    2000);   


});
});
.trip { display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="testbtn">show</button>

<div id="main">
    <div id="1" class="trip">Item1</div>
    <div id="2" class="trip">Item2</div>
    <div id="3" class="trip">Item3</div>
</div>

Upvotes: 0

Views: 49

Answers (2)

Hemal
Hemal

Reputation: 3760

Your setTimeout syntax is wrong

setTimeout('function',time);

It should be

setTimeout(

    function () {
        $elem.eq(i % l).fadeIn(300, function() {
            // $elem.eq(i % l).fadeOut(1500, go);
            $elem.eq(i % l).delay(d).fadeOut(300, go)
            i++;
        })
    };
    ,

2000);

Upvotes: 1

Satpal
Satpal

Reputation: 133433

You have syntax error, However just pass the function reference to be executed after delay interval.

setTimeout(go, 2000);


var $elem = $('#main .trip'),
  l = $elem.length,
  i = 0,
  d = 1000;

$(function() {
  $('.testbtn').on('click', function() {
    function go() {
      $elem.eq(i % l).fadeIn(300, function() {
        // $elem.eq(i % l).fadeOut(1500, go);
        $elem.eq(i % l).delay(d).fadeOut(300, go)
        i++;
      })
    };
    setTimeout(go, 2000);
  });
});
.trip {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="testbtn">show</button>

<div id="main">
  <div id="1" class="trip">Item1</div>
  <div id="2" class="trip">Item2</div>
  <div id="3" class="trip">Item3</div>
</div>

Upvotes: 2

Related Questions