"Is there a way to implement a sequence of fadeIn() followed by fadeOut() and then insertAfter

I have created a simple div fade cycle. Some of the divs are within an outer div, which is then placed in another outer div. I've written a script that cycles through these divs by fading them in and out. However, there seems to be a problem - the divs fade out correctly but do not fade back in as expected.

Take a look at this example to see the issue in action.

JS:

function tick() {
    var $obj = $(".major_data .commitment_box .commitment");
    $obj.first().fadeIn().delay(1000).fadeOut(function () {
        $obj.first().insertAfter($obj.last());
        tick();
    });
}
tick();

Interestingly, when the cycle repeats itself, the effect works correctly. How can I achieve this desired effect from the beginning of the cycle?

jqueryhtmlcssfade

Answer №1

"However, a new issue has arisen where the divs are fading out instead of fading in."

It seems like you meant to indicate that "the divs are not faded out initially." If your intention is for all the divs to start hidden and then gradually fade in, simply modify the following line:

var $obj = $(".major_data .commitment_box .commitment");

...to this:

var $obj = $(".major_data .commitment_box .commitment").hide();

Answer №2

Give this a shot:

function displayAnimation() {
        var $elements = $(".major_data .commitment_box .commitment").hide();
        $elements.first().fadeIn(1000).fadeOut(function () {
            $elements.first().insertAfter($elements.last());
            displayAnimation();
        });
    }
    displayAnimation();

Use .fadeIn(1000) to delay the fading in effect

DEMO

Or try this alternative approach:

function displayAnimation() {
    var $elements = $(".major_data .commitment_box .commitment").hide();
    $elements.first().fadeIn(1000,function () {
        $(this).fadeOut();
        $elements.first().insertAfter($elements.last());
        displayAnimation();
    });
}
displayAnimation();

DEMO

Answer №3

Each time you loop through the .commitment divs, they are already visible, so there is no need for jQuery to make them fade in. On the second go-around, they are hidden because of the previous fade out, allowing the fade in effect to work.

To fix this issue, it's best to initially hide your .commitment divs. You can accomplish this by adding .commitment { display: none; } to your CSS file.

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

Attempting to design a unique CSS ribbon but hitting a roadblock with getting the perfect curve just right

I have attempted to create a CSS shape (ribbon) using border radius, but I am struggling to achieve the desired curve. The curve I manage to create does not exactly match the curve of the div in the image. background: #008712; width: 89px; height: 22p ...

htmlcsscss-transformscss-shapes

Tips on resizing images in CSS with accompanying text to prevent overlap

In my school project, I am using cloud9. When utilizing the live preview in a small window pane, my images appear correctly sized. However, upon maximizing my screen browser, the images stack on top of each other and their dimensions increase. My ideal l ...

htmlcssimage

The 'slice' method is not accessible with the Kendo Grid Object

Attempting to connect the kendo grid to a WCF remote odata service is proving challenging. The grid fails to populate, throwing an exception Object doesn't support property or method 'slice'. Here's the javascript code used to initializ ...

jqueryajaxjsonkendo-ui

saving data in an array using JavaScript

I have a requirement to store values into an array in HTML that are generated by a random number generator in Python as {{player.a1s1}}. I have successfully handled this part. Essentially, every time the button "mm1a" is clicked, a new button will be displ ...

javascriptjqueryarrays

Embed a video onto a webpage using HTML and ensure it is responsive by implementing Bootstrap's grid

I am currently using the mPurpose-master bootstrap theme, which offers a feature allowing the placement of 3 blocks in a row that are fully responsive. <div class="section"> <div class="container"> <div class="row"> ...

csshtmltwitter-bootstrapvideo

Select checkboxes by clicking a button that matches the beginning of a string in JavaScript

I have a form with a list of users and checkboxes below their names. Each user has a button that should select all checkboxes assigned to them. Below is the code for the dynamically created buttons and checkboxes. The included function takes the form name ...

javascriptphpjqueryhtmlcheckbox

Show a pop-up notification for a compact disc

Received a CD containing various tutorials created in HTML. I am looking to have a browser window open with specific parameters, such as no toolbars and fixed width/height, to properly display the content. Using window.open with multiple parameters trigge ...

html

Personalizing a dropdown menu using ajax

I'm currently attempting to retrieve data from my database using AJAX and populate drop_down_list1, then display it in the subsequent drop_down_list2. I've been following a tutorial on YouTube (link: here), but unfortunately, it doesn't seem ...

phpjqueryajax

Looking for a feature similar to mix-blend-mode that can change the text color to its inverse when overlapping with a background color that matches

Seeking assistance on a Mondrian-style CSS Grid layout with a rotated sticky heading. Looking to achieve a visual effect where intersecting text turns white when a black horizontal line passes over or under it. https://i.sstatic.net/YQaxV.png Considering ...

cssmix-blend-mode

Is there a way to change the background color of product blocks on Shopify in a dynamic

Is there a way to customize the background colors of product blocks on Shopify by modifying the shop code? Take a look at this example: Mockup showing alternating block backgrounds Currently, all product blocks in the grid have a black background with wh ...

htmlcssshopify

Is it possible to bypass the confirmation page when submitting Google Form data?

Is there a way to bypass the confirmation page that appears after submitting a form? What I would like is for the form to simply refresh with empty data fields and display a message saying "your data has been submitted" along with the submitted data appea ...

javascriptphphtmlforms

Connecting CSS auto-complete with JSP content within Eclipse

Is there a way to connect the CSS autocomplete with the content of a JSP page? For instance, if I have an element like <div id="myid"> in the JSP file, can Eclipse auto-complete "myid" when typing "#" in the CSS file? I am aware that NetBeans has th ...

csseclipsejsp

The html-docx-js package generates incomprehensible text

Has anyone successfully utilized html-docx-js recently? I attempted the following code snippet: var newHTML = "<!DOCTYPE html><html><head lang='en'><meta charset='UTF-8'><title>Report</title& ...

javascripthtmlnpmms-worddocx

Develop a MySQL table using AJAX and HTML within a Cordova application

I've been developing an app using Cordova and I'm looking to create a feature where users can create and join different rooms to perform various actions. Despite trying multiple tutorials and scouring the internet, I'm struggling to understa ...

phphtmlmysqlajaxcordova

The banner <div> appears in Chrome but is not visible in IE9

I'm facing an issue with a banner div under my navigation. It seems to show up in Google Chrome but doesn't appear in IE9. Below is the HTML and CSS code: HTML: <div class="content"> <div class="slide-banner"></div> ...

csshtmlinternet-explorer-9

Instructions for populating a DataTable with JSON data while allowing for editing of rows

Hey there, looking for some expert advice, I've been experimenting with the datatable plugin and I'm curious if it's feasible to populate a table with row editing actions using ajax? This is the code snippet I currently have. It successfull ...

javascriptjqueryjsonajaxdatatable

The Rails application utilizes a background process application callback to initiate a specific event

I have a unique app that leverages the SuckerPunch gem and Carrierwave Backgrounder to efficiently upload and process images in the background of a cutting-edge rails application. As a user creates an instance of the Asset model, the image processing begin ...

jqueryruby-on-railsrubyajax

Discovering JSON data embedded within a script tag in an HTML response using Jsoup

Looking for help with extracting JSON content from script tags embedded in an HTML file. I attempted to use Jsoup without success. Can anyone provide guidance on utilizing JSOUP or another library for this task? Thank you in advance. ...

javaandroidhtmljsonjsoup

I am looking for an HTML solution that allows me to neatly stack photos of different sizes in two columns, always prioritizing the column with more empty space

Is there an easy method to populate two columns, each with a width of 50%, with photos in a way that the next photo is always added to the column with more available space? The photos come in different sizes but should be able to fit within the width of t ...

htmlcssstackalignment

Refresh Layers in Openlayers with LayerRedraw(), Rotate Features, and Manipulate Linestring Coordinates

TLDR: I am facing difficulties with my OpenLayers map. Specifically, I want to remove and add a layer called 'track', or find a way to plot a triangle based on one set of coordinates and a heading (see below). In my OpenLayers map, there is an i ...

javascriptjqueryjsonextjsopenlayers