Adding classes to a div in a sequential animation using jQuery: A step-by-step guide

I'm aiming to create an animated effect using jQuery that replicates the motion in this GIF. I experimented with CSS3 animation keyframes, but the result was not as clean and polished as I would like. If there is a simpler way to achieve this effect using CSS3, I'm open to suggestions.

Each CSS class that I want to apply includes a background color and background position.

<div class="displayer ico1"></div>

The sequence of CSS classes I intend to use are ico1 ico2 ico3 --- ico6. Moreover, I aim to introduce a 3-second delay between each transition, ensuring that they cycle back to ico1 after reaching ico6.

Although aware of the .queue() function, I struggle with implementing it effectively for this simulation.

Any assistance on this matter would be truly valued.

Thank you!

Edit----

I stumbled upon this jQuery plugin https://github.com/madbook/jquery.wait

It offers a tidy solution to execute this effect! 

$('.displayer').addClass('ico1').wait(5000).removeClass('ico1').addClass('ico2').wait(5000).removeClass('ico2').addClass('ico3').wait(5000).removeClass('ico3').addClass('ico4').wait(5000).removeClass('ico4').addClass('ico5').wait(5000).removeClass('ico5').addClass('ico6').wait(5000).removeClass('ico6');

My only hurdle now is how to loop back to the beginning.

Any suggestions?

jquerycss

Answer №1

This code provides a helpful solution,

Currently, I'm utilizing the setInterval function to execute the function after 3 seconds. All classes are stored in an array.

After every 3 seconds, one class is removed and another is added in a continuous loop.

    <script type='text/javascript'>

        $(document).ready(function(){   

           imageArray = new Array('icon1' , 'icon2', 'icon3', 'icon4', 'icon5', 'icon6'); //add more classes in this array
           i=0;  // first class to be used 
           setInterval(function(){
             i = (i >= imageArray.length)?0:i;
             $('.displayer').removeClass(imageArray.join(' ')).addClass(imageArray[i++]); 
           },1000); // this is the time in millisecond             
         });  
    </script>


<div class="displayer"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a custom countdown using Jquery and Javascript that integrates with MySQL and PHP to display the datetime in the format Y-m-d

Hey there, I'm looking to create a countdown script using dates in the format (Y-m-d H:m:s). The goal is to retrieve the current_datetime and expire_datetime in this format and incorporate them into some JavaScript or jQuery plugin to display a countd ...

phpjavascriptjquerydatetimecountdown

Customizing CSS for displayed MDBootrap components

I am currently using MDBoostrap, a styling tool similar to Bootstrap, in my React application. I have a select element that is coded like so: <div> <select id="Regions" style={errorSelect} value={this.state.userRegionId} onChange={this.handle ...

javascripthtmlcssreactjsmdbootstrap

What could be causing my js.erb file to not function properly?

Here is the code snippet I am working with: file.js.erb alert("Alert"); main.js jQuery.ajaxSetup({ 'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")} }) jQuery.fn.submitWithAjax = function() { this.submit( ...

ruby-on-railsjquery

Enhanced JQuery Functionality with Additional Parameters

My current class setup is as follows: <div class="photo" parameter1="custom" parameter2="custom"></div> There are a total of 4 parameters in use. I am looking for a solution to pass these parameters within my photo div for JQuery coding, whi ...

jquerycss

Unable to execute a basic opacity transition on a div element

Why isn't the opacity transitioning in Chrome? I only want it to fade in with the 'transitions' class without fading out first. Check out this code sample: http://jsfiddle.net/chovy/t37k3/9/ <div></div> <a href="#" class="s ...

jquerycsscss-transitions

Utilizing React JS: Displaying or Concealing Specific Components Based on the URL Path

Is there a way to dynamically change the navbar items based on the URL without having separate navbar components for each side? My current navbar design features 3 links on the left side and 3 links on the right, but I want to display only one side at a ti ...

javascripthtmlcssreactjsrouter

Ways to conceal CSS on the page when triggering a different element

I am trying to achieve the functionality of hiding the black arrow when clicking on the green arrow, all without using jQuery. Here is my fiddle: http://jsfiddle.net/t5Nf8/195/ html: <div class="arrow-down"></div> <div class="arrow-up"> ...

javascriptcss

Enhancing List Numbers with CSS Styling

Is there a way to customize the appearance of numbered lists? I created an ordered list and would like to modify the numbering style To remove the bullets And adjust the color and background ...

htmlcss

Tips for resolving the issue of CSS blocks disappearing when designing a webpage

When creating a responsive web page, the child block "overflows" from the parent block. This causes the entire page to shift to the left and an empty bar appears on the right side, moving all the content. I need to ensure that all content is positioned cor ...

cssbootstrap-4frontend

What could be causing the issue with AJAX not running in a Python Django deployment on Heroku

My Django application is successfully deployed on Heroku, but I'm facing an issue with executing Ajax in the template. The Ajax functionality works perfectly fine on my local machine, however, it's not working on Heroku. I've included a snip ...

javascriptjquerydjangoajaxheroku

Tips for creating an HTML table that fills the entire width of its parent element:

One of the rows in my table contains a nested table. I want both tables to fill up 100% of the width of the parent element. How can I achieve this? Check out the demo here Here's the HTML code: <div class="container"> <table> <tr ...

htmlcss

HTML5 - Ajax - puzzling behavior that I am unable to comprehend

Need Help Clarifying My Issue: I currently have a Div with Page 1 content. Page 1 contains a button that transitions the div content to Page 2. Page 2 has a button that switches the div content back to Page 1. The Problem: If Page 1 is loaded first, t ...

phpjavascripthtmljquery

Is there a way to retrieve the value of a dropped file in a file input using jQuery?

Can the data from a dropped file be set in a file upload input field? Or does a dropped file need to be instantly uploaded to the server? Here is an example code snippet: <input type="file" id="drop-box" /> $("#drop-box").on('drop', fun ...

javascriptjqueryhtmlfileinput

Successful execution occurring prior to beforeSend in a Cordova iOS application utilizing jQuery Ajax

After making some changes to the HTML of the login button, I encountered an issue where the alert was being triggered before the button's HTML had updated when testing on my iPhone using a Cordova-built app. Strangely, this problem did not occur when ...

javascriptjqueryiosajaxcordova

What is the best way to remove the hover effect from a specific element within a div?

I am looking to achieve a specific hover effect where the white part does not darken when hovering over a certain element within its child elements. Here is the HTML code I have: <div className= {css.searchBarDiv}> <div className={css.searchBar ...

javascripthtmlcssreactjs

`Cannot Get jQuery ScrollTop Function to Work for 2nd Element`

Having trouble with an issue. Let me explain. I implemented a scrollTop Jquery on page load that scrolls down after a delay to prompt user action. However, I'm facing a problem where another scrollTop doesn't work after clicking buttons "#b3,#b3 ...

javascriptjqueryhtmlcss

Checkbox ensemble computes total score

I am currently working on a project that involves multiple checkbox groups, with each group containing 3 checkboxes labeled as (1, X, 2). My goal is to assign a value of 100% to each group, distributed evenly among the checkboxes within it. The distributio ...

javascriptjqueryhtmlcheckbox

The jquery ajax form is experiencing difficulties when the document has been altered

Registering for an account requires filling out the signup form and agreeing to the terms. Clicking on the terms link triggers an AJAX post request to the server. The server then sends back the terms, which are appended to the webpage while the form elem ...

jqueryajaxformspost

Enhance information and retrieve data using ajax

I have encountered an issue while trying to display data using modal Bootstrap and updating the data with ajax simultaneously in CodeIgniter. Does anyone know how to achieve this? This is my AJAX view <a href="javascript:void(0)" onclick="show_note(&a ...

jqueryajaxcodeignitercodeigniter-3

Suggestions for relocating this function call from my HTML code

I have been working on updating a javascript function that currently uses an inline event handler to a more modern approach. My goal is to eliminate the unattractive event handler from the actual HTML code and instead place it in a separate modular javascr ...

javascriptjqueryregexforms