Home/ Questions/Q 8827165
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T07:18:41+00:00

How do I write a Javascript that flashes an array of texts (in this

  • 0

How do I write a Javascript that flashes an array of texts (in this case words)? I’m very new to Javascript. I have like 5 string arrays and I want these to flash and fade in order. If the last one reaches it will start from the beginning. I’m not really looking for sharp disappear and appear, but kind of fading and reappearing slowly kind of mechanism like a news bulletin.

- "Car"
- "Dog"
- "Sky"
- "Building"

car - <fade> - <appear> - dog - <fade> - <appear> - sky  ... etc.

If someone provides a link or actual code, I’m willing to accept the answer quickly and give you points.

It is done like this:

    var array = ["Hello", "World"]
    var len = array.length
    for (var i = 0; i < array.length; i++) {
        var interval = loopVerySlowly(array, i);
    }

    function loopVerySlowly(array, index) {
        function doSomething() {
            var _content = document.getElementById("hello");

            _content.innerHTML = array[index];

            index = (index + 1) % array.length; // increment for next time
        }

        return setInterval(doSomething, 1000 * 5);
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When I started off learning javascript everyone was like learn jQuery, it makes everything much easier and I will pass the same help off to you ‘learn jQuery’. More here

    fadein is a lot easier in jquery so here is some docs

    here
    fadeout is also here
    .

    So a bit of background.
    jQuery is a javascript Library which it’s slogan is ‘write less do more’ Which is exactly what it does, the example below would be a lot larger if it wasn’t for jQuery. JQuery needs to be placed in your website script as most of you’r javascript files do, in the example below I use
    google content Delivery Network (CDN) which is here https://developers.google.com/speed/libraries/devguide. You also can download it and keep it on you server, but if you have limited band width and space on your server it probably would be better if you let google to host it.

    so for a example

        <html>
      <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function(){
       $(".fadein").click(function(){
            $(".fade").fadein('slow');
        });
        $(".fadeout").click(function(){
            $(".fade").fadeOut('slow');
        });
    });

</script>

      </head>
      <body>
        <div class="fade" style="background: black; width: 300px; height: 300px;position: absolute"><p> I can fadein</p></div>
        <button class="fadein">fadein<button
        <button class="fadeout">fadeout</button>



      </body>
    </html>

    also here is a example for everything I just used

    here is a jsFiddler: located Here also a jsfiddler for fading and showing in order example here

    • 0