CODEWITHSUNDEEP
javascriptjquery
zadrozny
zadrozny

Reputation: 1731

Text carousel on timer with fade in, fade out

I'm trying to have some text fade out, change, and fade back in at regular intervals and automatically (ie, no button).

I cannot get this code to synchronize setInterval with the fading. I've tried fadeToggle as well as a combination of fadeIn and fadeOut together. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

 <div id="changeText">Zero</div>

 <script type="text/javascript">
    var text = ["One", "Two", "Three"];
    var counter = 0;
    var elem = document.getElementById("changeText");

    setInterval(change, 3000);
    function change() {

    $("#changeText").fadeToggle(3000);

     elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { counter = 0; }

    }
    </script>

PS I am agnostic about the solution. If this can be done more elegantly in CSS (which I've used for fading but not transition), please let me know.

Upvotes: 0

Views: 1107

Answers (3)

dhudson
dhudson

Reputation: 571

I'm not sure how this compares performance wise. This implementation has no dependencies.

(function() {
  var STEP  = 0.1;
  var x = 0;
  var text  = ['one', 'two', 'three'];
  var element = document.querySelector('#changeText');

  if(!element) { return; }
  element.innerText = text[0];
  requestAnimationFrame(change);

  function change() {
    var y = Math.sin( x );
    var opacity = (y + 1) / 2;

    x += STEP;
    element.style.opacity = opacity;

    if(y <= -0.99 && Math.sin(x) > -0.99) {
      var txtIdx = text.indexOf(element.innerText);
      if(txtIdx === text.length - 1) {
        element.innerText = text[0];
      } else {
        element.innerText = text[++txtIdx];
      }
    }
    requestAnimationFrame(change);
  }
})()

Upvotes: 0

guest271314
guest271314

Reputation: 1

Try utilizing .fadeTo() , remainder operator

var text = ["One", "Two", "Three"];
var counter = 0;
var elem = document.getElementById("changeText");

function change() {
  $(elem).fadeTo(3000, 0, function() {
    this.innerHTML = text[counter];
    counter = ++counter % text.length;
    $(this).fadeTo(3000, 1, change)
  })
}

change()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="changeText">Zero</div>

<script type="text/javascript">
</script>

Upvotes: 2

Ben
Ben

Reputation: 99

There are a million ways to skin a cat. If you want to do fadeToggle, I wouldn't also use setInterval, because they will be called at the same time and cancel each other out.

One thing to keep in mind is that fadeToggle will effect more than just the opacity and turns the objects display off once it is hidden, and that could effect your layout.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

 <div id="changeText">Zero</div>

 <script type="text/javascript">
    var text = ["One", "Two", "Three"];
    var counter = 0;
    var elem = document.getElementById("changeText");

    $(document).ready(function(){ change()});
    function change() {

    $("#changeText").fadeToggle(3000, 'swing', function(){
      if($("#changeText").css("display") == "none")
      {
     elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { counter = 0; }

      }
      change();
    });

    }
    </script>

Upvotes: 0

Related Questions