反复调用函数进行淡入和淡出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.

Answer 1

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>