JavaScript is employed to fade words in and out of an array list

Question

JavaScript is employed to fade words in and out of an array list

I am trying to achieve a fade in/fade out effect for each word, displayed one after the other. Currently, the script either shows only the last word in the array or displays all words together. I am utilizing animate.css and JQuery for this transition of words. Any suggestions would be appreciated. Thank you.

   <script>
    var classes = [ '<h1 class="animated infinite rotateOutUpLeft">Software        </h1>',
            '<h1 class="animated infinite rotateOutUpLeft">project </h1>',
            '<h1 class="animated infinite rotateOutUpLeft">Engineering</h1>',  
            '<h1 class="animated infinite rotateOutUpLeft">Science</h1>'
        ];

         var display;
           for (i = 0; i < classes.length; i++) {
                document.write(i);
                $("#tst").empty();
                 $("#tst").append(classes[i]);
                // setTimeout(function(){alert('join');}, 10000);
                // $("#tst").append(classes[i]);
                // setTimeout(function(){$("#tst").append(classes[i]);}, 6000);
            }
</script>

javascript jquery css

Answer 1

Answer №1

Are you searching for a snippet of code that will automatically change the word every six seconds with CSS handling the fading effect? If so, you can try this solution:

var index = 0;
$("#text-element").html(wordArray[index]);
setInterval(function() {
    index = (index + 1) % wordArray.length;
    $("#text-element").html(wordArray[index]);
}, 6000);

jsfiddle

Alternatively, you can use this approach:

(function displayWord(index) {
    $("#text-element").html(wordArray[index]);
    setTimeout(function() {
        displayWord((index + 1) % wordArray.length);
    }, 6000);
})(0);

jsfiddle

If you prefer the code to include fading effects:

var wordArray = ['Software', 'project', 'Engineering', 'Science'];
(function displayWord(index) {
    $('#text-element h1').text(wordArray[index]).fadeIn(1000).delay(600).fadeOut(1000, function() {
        displayWord((index + 1) % wordArray.length);
    });
})(0);

jsfiddle

Answer 2

Are you searching for a snippet of code that will automatically change the word every six seconds with CSS handling the fading effect? If so, you can try this solution:

var index = 0;
$("#text-element").html(wordArray[index]);
setInterval(function() {
    index = (index + 1) % wordArray.length;
    $("#text-element").html(wordArray[index]);
}, 6000);

jsfiddle

Alternatively, you can use this approach:

(function displayWord(index) {
    $("#text-element").html(wordArray[index]);
    setTimeout(function() {
        displayWord((index + 1) % wordArray.length);
    }, 6000);
})(0);

jsfiddle

If you prefer the code to include fading effects:

var wordArray = ['Software', 'project', 'Engineering', 'Science'];
(function displayWord(index) {
    $('#text-element h1').text(wordArray[index]).fadeIn(1000).delay(600).fadeOut(1000, function() {
        displayWord((index + 1) % wordArray.length);
    });
})(0);

jsfiddle

JavaScript is employed to fade words in and out of an array list

Answer №1

Similar questions

Error type thrown by BrowserSync during initialization

Customizing object joining rules in JavaScript arrays

Disappear the div when it has no content and apply a class to a different div

The Angular datepicker is failing to trigger the ng-change event

Guide on converting JSON to CSV in React by utilizing the map function

Ensuring the Alignment of Element Borders in HTML CSS

The behavior of starting and stopping the setInterval function

Check to see if the property of the object does not exist within the array and update as

The npm install command can expose various vulnerabilities

Unable to alter the default error message within the jquery-validation plugin

How to change the value of feColorMatrix in VueJS

Is it possible to craft a miniature duplicate of a div element?

Using a $watch on a directive that has an isolated scope to monitor changes in a nested object property retrieved from

The floated div is disrupting the flow due to its margin

Encountering an issue while following the Amadeus JavaScript beginner's guide

Error: The function in Knockout js is not defined as undefined

How to Mark Completed Tasks and Display Them on Fullcalendar

Utilizing cylon.js with Nest Thermostat

Design the paragraph to resemble text from Microsoft Word

When the mouse is moved, display a rectangle on the canvas