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

Question

hello freinds我如何使以下代码与fadein() fadeout()效果一起工作我希望下一个数字都有fadein()效应，而当前数字则有fadeout()效应。我能循环吗。。就像如果在第一个数字是CCD_ 6之后的最后一个数字是CCD_。类环路

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

Answer 1

您可以这样检查counter：

function incrementCounter() {
  $('#fade').html(counter);
  counter++;
  if(counter%2)
      $('#fade').fadeOut();
  else
      $('#fade').fadeIn();
  if (counter < 4) {
    setTimeout(incrementCounter, 2000);
  }
}

或者你也可以检查目标是否可见

function incrementCounter() {
  $('#fade').html(counter);
  counter++;
  if($('#fade').is(":visible"))
      $('#fade').fadeOut();
  else
      $('#fade').fadeIn();
  if (counter < 4) {
    setTimeout(incrementCounter, 2000);
  }
}