CODEWITHSUNDEEP
jqueryjquery-animateinfinite-loopdocument-ready
Dorćolac
Dorćolac

Reputation: 3

jQuery animate changing text infinite loop

I'm trying to create a text change animation based on fade-out - change text - fade-in concept that will run as an infinite loop, circling 3 different texts with 2 second pauses inbetween.

I have this jQuery code in my Javascript file:

$(document).ready(function changeText(){
    $(this).find("#changeText").delay(2000).animate({opacity:0},function(){
        $(this).text("foo").animate({opacity:1},function(){
            $(this).delay(2000).animate({opacity:0},function(){
                $(this).text("bar").animate({opacity:1}, function(){

                });
            });
        });
    });
});

which does what it's supposed to, but, of course, only once. I can't seem to get it to work as a loop no matter what I do. I have browsed a lot of similar Stack Overflow questions, but none seem to have solved my problem.

I tried setInterval, window.function, for loop and a few other soltuions, and they either throw an error about too much recursion or crash my browser or don't work at all. Either it's not even supposed to work that way or I am not doing something right.

This is the HTML that I'm trying to change:

<div class="container"><span id="changeText">blah</span></div>

Upvotes: 0

Views: 5305

Answers (2)

Dorćolac
Dorćolac

Reputation: 3

I must be stupid, the solution was too simple for me to see it. I even tryed it, but I must have written something wrong which made it not work. All this time I was trying to re-call the function inside the '$(document).ready' scope from outside the scope, which is close to impossible, but I actually don't need to do it.

I just created a normal JavaScript function with jQuery inside it which is being called once outside the function, and every re-call is being made from the last .animate() callback.

function changeText(){
    $("#changeText").delay(2000).animate({opacity:0},function(){
        $(this).text("foo").animate({opacity:1},function(){
            $(this).delay(2000).animate({opacity:0},function(){
                $(this).text("bar").animate({opacity:1},function(){
                    $(this).delay(2000).animate({opacity:0},function(){
                        $(this).text("blah").animate({opacity:1},function(){
                            changeText();                           
                        });
                    });
                });
            });
        });
    });
};

changeText();

Upvotes: 0

DinoMyte
DinoMyte

Reputation: 8858

You are using 'this' reference at the starting of your code, but it's missing the context to the element it's pointing to. Also, since you have the element with the id 'changeText', you can simply target it directly in your selector.

  $(document).ready(function(){
    $("#changeText").delay(2000).animate(
    {opacity:0 },function(){
       $(this).text("foo").animate({opacity:1},function(){
        $(this).delay(2000).animate({opacity:0},function(){
            $(this).text("bar").animate({opacity:1}, function(){
            });
        });
    });
  });
});

Working example : https://jsfiddle.net/q1o2f5jx/

EDIT :

To make improvement in the code, add the text in the array and increment the index on setInterval.

var textArray = ["foo","bar","blah1","blah2"];
var index = 0;
setInterval(function(){        
$("#changeText").animate({
opacity:0
},function()
{
   if(textArray.length > index) {
   $(this).text(textArray[index]).animate({opacity:1})
   index++; 
   }
   else
   index = 0;
});
},2000);

Working example : https://jsfiddle.net/q1o2f5jx/2/

Upvotes: 5

Related Questions