Ways to time animations differently and activate two animations at the same time in every loop

I have 3 hidden text boxes that I want to fade in and slide down simultaneously by 40px when the DOM loads. They should be staggered so that each one triggers after the previous animation finishes.

Below is the relevant JavaScript code snippet:

jQuery(function($) {
  "Use Strict"
  var outerFunction = function(dropIn, time, offset) {  
    $(dropIn).each(function() {
      var me =   $(this);
      var mejo = $(this).children('.drop-in-text-opacity-wrap');
      setTimeout(function() {
        me.css({'margin-bottom': 0});
        mejo.fadeIn(1000);
      },time)
      time = time + offset;
    }) 
  }
  outerFunction('.drop-in-text', 0, 500)
});

Here is a working example on CodePen for reference.

Although I am close to finding a solution, I am facing an issue where the previous elements jump back to their original position when the second and third iterations start. Despite inspecting the CSS, it does not revert back. I have tried using methods like .dequeue(), animate({//some code},{queue: false}), .stop(), but without any success. Any help or insight would be greatly appreciated!

Answer №1

Modifications I implemented:

New CSS tweaks made:

  1. Eliminated margin from drop-in-text.
  2. Inserted translateY(-40px) into the code.

JavaScript changes:

  1. Replaced margin-bottom: 0 with
    transform: translateZ (0) translateY(0)

VIEW CODEPEN EXAMPLE

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

Which directives in AngularJS facilitate one-way binding?

Which directives in AngularJS support one-way binding? While ng-model enables two-way binding, what about ng-bind and {{ }} expressions - do they also support one-way binding? ...

CSS - sticky header causing issues when resizing the browser window

I'm currently facing an issue with the layout of my navbar. While I've managed to create a fixed navbar that stays at the top, the content on the page seems to be hidden underneath it. To address this problem, I attempted to add a 5% margin from ...

A JavaScript async function that can be activated either by clicking the search button or by hitting the "enter" key in the input field

Recently, I've been working on an async function in Vanilla Javascript that is triggered by a click event on the search button. However, I would like to modify it so that the function can also be initiated when the "enter" key on the keyboard is press ...

The presence of inline display causes gaps of white space

Located at the bottom of this webpage is a media gallery. The initial three images comprise the photo gallery, followed by video thumbnails inlined afterwards. However, there seems to be an issue with the alignment of each element within the video gallery. ...

Automatically closing the AppDateTimePicker modal in Vuexy theme after selecting a date

I am currently developing a Vue.js application using the Vuexy theme. One issue I have encountered is with a datetimepicker within a modal. The problem arises when I try to select a date on the datetimepicker component - it closes the modal instead of stay ...

Styling rounded buttons with GTK and CSS

In my C++ application, I am attempting to create a rounded button by utilizing an external CSS file. Although I have successfully achieved a round button, there is still a pesky rectangular border that remains and I am struggling to figure out how to remo ...

Alternative Options for Playing Audio in Internet Explorer 8

I'm in the process of setting up a button that can both play and pause audio with a simple click. While this functionality is working smoothly in modern browsers like Google Chrome, I am facing compatibility issues with IE 8. Even after attempting to ...

Leverage jQuery in JSF 1.2, or opt for using jQuery in conjunction with JSP (JSTL)

While there are numerous technical inquiries revolving around JSF and jQuery, I am interested in making a well-informed decision between these two popular technologies. It is clear that jQuery can be used alongside JSF 1.2 (I am specifically referencing JS ...

Combining JWT authentication with access control lists: a comprehensive guide

I have successfully integrated passport with a JWT strategy, and it is functioning well. My jwt-protected routes are structured like this... app.get('/thingThatRequiresLogin/:id', passport.authenticate('jwt', { session: false }), thing ...

Adjust the dropdown width based on the screen's resolution

I recently encountered an issue while implementing a dropdown menu in my React application. Everything was functioning smoothly until I attempted to change the browser resolution through the console. // index.js: <select id="project_type" ...

Exploring the combination of Babel and Next.js: Integrating custom scripts into a project

Hello, I am currently learning next.js and facing a common issue that I need help with. I have created my own ES6 JavaScript library and now I want to convert it to babel so I can use it in my next.js application. Is there a way to configure babel for sp ...

Best practices for assigning values to model field in EXT JS are as follows:

I'm facing an issue with a certain model structure: Ext.define('my.workspace.Area', { extend: 'Ext.data.Model', idProperty: 'id', fields: [ {name: 'id', type: 'string'}, {n ...

Displaying Wordpress posts in various columns

Typically, I enjoy solving problems on my own, but I have hit a roadblock with this one and haven't been able to find a solution online. I am wondering if there is a way in WordPress to choose which column a post (with its thumbnail) appears in. For e ...

I could not view the jquery ui icon, but the text within the span appeared on the screen

I'm facing an issue where the jQuery UI icon is not visible, but the text within the span tag is being displayed. I tried using Firebug to troubleshoot, but I couldn't see the CSS code when inspecting the span tag. <TITLE> Test </TITLE ...

Reaching out to the Edge: Enhancing the jQuery Slider Experience

Alright, I'm really excited about using this amazing slider. What I love most is the "free mode" feature that creates this stunning sliding effect. The size and number of slides are absolutely perfect for me. But there's just one small adjustment ...

Is it possible to generate a PagedListPager without the need to invoke a function?

Managing a list with ajax calls has been fairly smooth on the initial load. The search button triggers an ajax call that loads the first page of results without issues. However, an obstacle arises when trying to implement PagedListPager which ends up reset ...

Adjusting the input label to be aligned inside the input box and positioned to the right side

I am currently working on aligning my input label inside the input box and positioning it to float right. The input boxes I am using have been extended from b4. Currently, this is how it appears (see arrow for desired alignment): https://i.stack.imgur.co ...

Center the text within a span element in an inline-block container

I'm currently working on a website design that features a flat aesthetic. I have a header at the top and two blocks of different colors placed side by side underneath it. Initially, I attempted to use float left and right for positioning but was recom ...

choose particular column in every row from the table's header class name

Every <th> in a table has a class, while the <td> elements do not. Is there a way to style all corresponding <td> elements with the same styles as their <th> counterparts using only plain css without any script? Furthermore, since ...

How can an array be concatenated using tabs?

I am currently in the process of integrating with an old system that requires a value to be sent via a GET request as a tab delimited string. I have my data stored in an array, but I am facing difficulty when attempting to properly format it using the join ...