Text append and cycle through effect

Question

I'm trying to achieve a cycle through text fadein/fadeout effect with strings on an array. For example, I start with an initial text ("Los Angeles") inside a span tag. I want this text to change from the string "Los Angeles" to "Sacramento" with a fadein animation and a delay in between, which I'm trying to achieve with a timing function. I'm defining an array where I store the strings that I want to cycle through. The problem I'm getting is that I can only get to change the string from the first element of the array to the last one. The elements in between, like San Francisco and Berkeley, get ignored by the for loop. What am I doing wrong? Thanks. Any help is appreciated. Here is what I got so far:

  <div id="fly" class="container-fluid section text-center">
  <h1 id="intro-txt">Go from <br> <span id="dest1" style="color: #b9b7b7;">Los Angeles</span> to <span id="dest2" style="color: #b9b7b7;">Las Vegas</span> <br> with no hassle.</h1>
  <script>

  var from = ["San Francisco", "Berkeley", "Place3"];
  var to = ["Sacramento", "New Mexico", "Place3"];
  var total = from.length;
  var index = 0;

  $(document).ready(function(){
    for(index; index < total; index++){
      var fromLoc = from[index];
      var toLoc = to[index];


      var textScroll = function(){
        var start = $("#dest1")
        $("#dest1").fadeOut(function() {
          $(this).text(fromLoc).fadeIn();

        });
        $("#dest2").fadeOut(function() {
          $(this).text(toLoc).fadeIn();
        });            
      }
      setTimeout(textScroll, 2000);
    }
  });
  </script>

score 1 · Accepted Answer · edited May 23 '17 at 12:24

1

You are creating multiple setTimeout but they will all run at virtually the same time.

Use the index of the loop as a duration multiplier to create the time offsets. Also you need a closure since the value of index will be at it's maximum before the function runs. See JavaScript closure inside loops – simple practical example

var textScroll = function(fromLoc, toLoc) {
  var start = $("#dest1")
  $("#dest1").fadeOut(function() {
    $(this).text(fromLoc).fadeIn();

  });
}
$.each(from, function(index, fromLoc) {
  var toLoc = to[index];
  setTimeout(function() {
    textScroll(fromLoc, toLoc);
  }, index * 4000);
})

edited May 23 '17 at 12:24

Community

1
1

answered Jan 08 '17 at 23:36

charlietfl

170,828
13
121
150

Sorry about that! – Joel Pou Jan 10 '17 at 03:37
how can I restart the loop? The idea would be to start over with the first string after the last one. – Joel Pou Jan 10 '17 at 04:53
Nevermind. Thanks for the help. Found the answer on the following thread if anyone is interested: http://stackoverflow.com/questions/18536436/restart-jquery-each-after-loop-ends – Joel Pou Jan 10 '17 at 05:28

score 0 · Answer 2 · answered Jan 08 '17 at 23:53

var from = ["San Francisco", "Berkeley", "Place3"];
var to = ["Sacramento", "New Mexico", "Place3"];
var total = from.length;
var i = 0;
setInterval(function (){
    $("#dest1").fadeOut(1000,function(){$(this).text(from[i])}).fadeIn(1000);
    $("#dest2").fadeOut(1000,function(){$(this).text(to[i])}).fadeIn(1000);
    if (i >= total-1) i = 0;
    else i++;
},2200);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fly" class="container-fluid section text-center">
  <h1 id="intro-txt">Go from <br> <span id="dest1" style="color: #b9b7b7;">Los Angeles</span> to <span id="dest2" style="color: #b9b7b7;">Las Vegas</span> <br> with no hassle.</h1>
</div>

Text append and cycle through effect

2 Answers2