CODEWITHSUNDEEP
javascriptjquery
Kamal
Kamal

Reputation: 2180

fadein() and fadeout() using with setinterval()

hello freinds how can i make folowing code working with fadein() fadeout() effect i want the every next number come with fadein() effect and current number go with fadeout() effect . can i make it in loop .. like if last number is fadeout() after that first number is fadein() . like loop

<script>    
var counter = 1;
    $(function() {
      incrementCounter();
    });

    function incrementCounter() {
      $('#fade').html(counter);
      counter++;
      if (counter < 4) {
        setTimeout(incrementCounter, 2000);
      }
    }
</script>

Upvotes: 0

Views: 980

Answers (1)

Manuel van Rijn
Manuel van Rijn

Reputation: 10315

you could do a check on counter like this:

function incrementCounter() {
  $('#fade').html(counter);
  counter++;
  if(counter%2)
      $('#fade').fadeOut();
  else
      $('#fade').fadeIn();

  if (counter < 4) {
    setTimeout(incrementCounter, 2000);
  }
}

or you could also do the check if the target is visible

function incrementCounter() {
  $('#fade').html(counter);
  counter++;
  if($('#fade').is(":visible"))
      $('#fade').fadeOut();
  else
      $('#fade').fadeIn();

  if (counter < 4) {
    setTimeout(incrementCounter, 2000);
  }
}

Upvotes: 1

Related Questions