Call Function repeatedly for fade-in and fade-out JQuery

Question

I have an array of words which I would like to fade-out and fade-in continuously. I am very new to JS and I am not able to figure out.

My code is as below:

animate_loop = function(){
        var showText = ["Security","Mobile/Wireless","Cloud/Database","PC/Storage"]
        $.each(showText, function(i, val) {
        setTimeout(function() {
            $('#animate').fadeOut("slow", function() {
                $(this).text(val).fadeIn("slow");
            });
        }, i * 3000);
        });

setInterval(function(){animate_loop();},5000)

With this code, the function loops through the array showText really fast and I was wondering if there is any other approach without a setInterval to achieve this. May be by just calling animate_loop function infinitely which I read is not advisable. So any suggestions are welcome.

My personal suggestion: avoid using JavaScript for this entirely. CSS can handle this all on its own using [keyframe animation](https://css-tricks.com/snippets/css/keyframe-animation-syntax/). — Tyler Roper, Aug 23 '17 at 15:56
See this CSS solution -> https://stackoverflow.com/questions/23985018/simple-css-animation-loop-fading-in-out-loading-text — Rob M., Aug 23 '17 at 15:56
I need four words animated at the same spot on my HTML page. I don't want to create four `
`. I don't fill CSS would help me. — Krishnang K Dalal, Aug 23 '17 at 16:01

Keith · Accepted Answer · 2017-08-23T16:25:42.757

2

other approach without a setInterval

Yes, what I've done here is use the callback's to keep a constant chain running. Basically fadeIn / fadeOut, re-run on the fadeOut.

$(function () {

  var showText = ["Security","Mobile/Wireless",
  "Cloud/Database","PC/Storage"];

  var 
    showNum = 0,
    $showText = $('.showtext');

  function doShow() {
    $showText.text(showText[showNum]);
    $showText.fadeIn('slow', function () {
      $showText.fadeOut('slow', function () {
        //lets make it so it wraps back to the start
        showNum = (showNum + 1) % showText.length; 
        doShow();
      });
    });
    
  }
  
  doShow();
});

.showtext {
  font-size: 24pt;
}

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


<div class="showtext">
</div>

edited Aug 23 '17 at 16:25

answered Aug 23 '17 at 16:03

Keith

22,005
2
27
44

Consider providing at least some minimal explanation of your answer. In it's current form, you're essentially just saying "Here's your code:" without any means for OP (or future readers) to understand or learn from it. – Tyler Roper Aug 23 '17 at 16:05
100%. This is exactly what I want. Thanks a lot @Keith – Krishnang K Dalal Aug 23 '17 at 16:05
I have seen number o posts with just the text explanation of what they want along with the self-explanatory code. I have clearly mentioned what I am looking for. I am sorry if you didn't like my way of asking the question @Santi – Krishnang K Dalal Aug 23 '17 at 16:12
@KrishnangKDalal My criticism was of this answer providing no context, not of your question. – Tyler Roper Aug 23 '17 at 16:15
@Santi Good point, but I was first seeing if this is what the OP wanted. I'll put some extra detail in now I know it's what he wanted. Doing before hand could well of wasted my time if it wasn't what he needed. I could have deleted if it wasn't you see. Hope that makes sense. :) – Keith Aug 23 '17 at 16:17
Oh, I am sorry then, I got bummed by the down-vote I received for the question. And the @Keith answer is exactly what I was looking for hence, the upvote. – Krishnang K Dalal Aug 23 '17 at 16:18
@Keith That's fine as long as you're always going to provide the context once the answer is accepted, and not only when someone calls you out :) For further reading on the topic, check out a related discussion: [Fastest Gun in the West](https://meta.stackexchange.com/questions/9731/fastest-gun-in-the-west-problem). **Regarding the down vote:** I downvoted you. I planned on removing it once you edited your answer to be more complete. Without an edit, StackOverflow actually restricts me from changing my vote. **EDIT:** Thank you. – Tyler Roper Aug 23 '17 at 16:24
@Santi That makes sense, thanks for letting us know. – Keith Aug 23 '17 at 16:29

Call Function repeatedly for fade-in and fade-out JQuery

1 Answers1