What is the method to execute jQuery code after the completion of a fade out effect?

I am attempting to fade out a div upon click while also adjusting some CSS properties.

The problem I am encountering is that the CSS properties change during the fade out transition, instead of after it has completed. I would like the values to change once the fade out is finished:

<script type="text/javascript">
$('#r_text').click(function() { 
    $(".box1_d").fadeOut();
    $(".box1_c").css("top","0px");
});
</script>

Although everything is functioning as intended, the timing is not quite right. I require the CSS values to be modified only after the fadeout effect is fully executed, not while it is still in progress.

Is there a way to achieve this?

If so, do you have any suggestions on how to accomplish it?

Thank you.

javascriptjquerycss

Answer №1

Implement a callback function to adjust the .css() method as the second argument for fadeOut(). This function will execute once the fade animation is complete.

<script type="text/javascript>

var fadeDuration = 500;
$('#r_text').click(function() { 
    $(".box1_d").fadeOut(fadeDuration, function() {
      $(".box1_c").css("top","0px");
    });
});
</script>

Answer №2

If you are using jQuery version 1.5 or higher, it is recommended to use the Deferred object instead of relying on the callback parameter:

$('#r_text').click((function () {
    var animations = {
        initial: function () {
            return $(".box1_d").fadeOut(1500);
        },
        following: function () {
            return $(".box1_c").css("top","0px").animate({fontSize: '150%'});
        },
        onDone: function () { 
            alert('DONE!'); 
        }
    };
    return function(e) {
        $.when(animations.initial())
            .pipe(animations.following)
            .done(animations.onDone);
        e.preventDefault();
    };
}()));

Witness it in action on JsFiddle: http://jsfiddle.net/wGcgS/2/

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

The Material UI component successfully loads the options data list from the server response, however, it fails to return the selected value when an option

My goal is to dynamically populate my country and province select component based on server response data. The process begins with the user selecting a country, which triggers a request to the server using the selected country's id. The server respond ...

javascriptreactjsmaterial-ui

The footer element rebels against its designated functionality

The standard structure follows: <body> <div class="wrapper"> <nav></nav> <myContent></myContent> </div> </body> <footer></footer> In this setup, the footer is expected to ...

htmlcss

What is the best way to center an image within its div, especially when the image size may vary and could be larger or smaller than the div wrapper?

Is there a way to horizontally center an image inside a div, regardless of the size difference between the image and its wrapper? I am aware of a Javascript solution, but I am specifically looking for a CSS-based solution. The following sample code does ...

css

Pass a reply from a function to a route in expressjs

I'm currently working on a project where I need to retrieve JSON data from an API using an Express server in Node.js. However, I'm facing some confusion regarding how Node.js manages this process. In my code, I have both a function and a route de ...

javascriptnode.jsexpress

I'm experiencing difficulties inserting data into my RECHARTS chart

I have several sets of data arrays from an API that I receive, and I need to use the [1] index of each array on the line and the [0] index on the axis of my chart. DATA SET 31) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2 ...

javascriptarraysreactjsnext.jsrecharts

Tips for utilizing the getJson method to pass a variable to a PHP file

I need help with my JavaScript code, as I am trying to pass a datastring containing the value "no" to data.php using getJson in order to receive JSON as a response. However, my JavaScript code is not functioning correctly. Below is the code that I have: J ...

javascriptphpjqueryajaxjson

How to pass property data between sibling components in Vue 2

I am facing a situation with two components - Header.vue and Sidebar.vue In Header.vue, there is a button that when clicked should change the value of a property in Sidebar.vue The template code in Header.vue looks like this: <a v-on:click="toggl ...

javascriptvue.jsvuejs2

Search through a group of distinct objects to find arrays nested within each object, then create a new object

I am currently working with objects that contain arrays that I need to filter. My goal is to filter an array of classes based on category and division, then return the new object(s) with the filtered arrays. Below is a representation of the JSON structure ...

javascriptarraysreactjs

Hiding a div upon submission using jquery validator

I need assistance with a validator that currently hides the submit buttons and displays a "please wait" message after the user clicks submit. The issue is that it also triggers this behavior when a date field validates. Is there a way to modify the code s ...

javascriptjqueryvalidation

Adjust the color of the sidebar's list items when scrolling

How can I change the background color of left sticky sidebars li on scrolling? When scrolling through BMW, BMW's background color in the sidebar should turn green. Please refer to the code snippet provided below. The background color of the li ...

javascriptjqueryhtmlcss

Tips on creating a search query with date condition in the format of M/D/YYYY and stored as a string

In my collection, I have two fields structured like this: { "StartDate" : "1/2/2019", "EndDate" : "5/14/2019" } I need to write a find query to retrieve documents within the current date range. For example: db.collection.find({StartDate:{$lte: &a ...

javascriptnode.jsmongodb

Adjust the size of an HTML image for printing using a JavaScript window.print() function

On my website, I have a print option set up where specific elements are hidden using @media. How can I adjust the size of an image within the @media query when my JavaScript print function is triggered? I am able to modify a regular div element easily, but ...

javascriptphphtmlcssimage

What is the best way to resize an image for mobile site optimization?

I've been struggling with resizing an image by its width for different mobile devices even after trying to search on Google. Here's what I have attempted: CSS: img.test { width: 100%; height: auto; } HTML: <html> <head> ...

htmlcssimage

Sharing a website link within Jquery and Ajax as a variable

Looking to dynamically load a collection of links on a page without writing out long statements for each one? Simply extract the URL from the attribute and pass it where needed. The code snippet below will demonstrate how to fetch the content using AJAX. ...

jqueryajax

Incorporating an HTML Canvas element within a CSS grid design

I've been attempting to integrate an html canvas that I created into one of the css grid classes specified in my code. The code runs when the "Calculate" button is clicked. Upon clicking the button, the <div> section designated for the canvas r ...

javascripthtmlcsscanvas

Sending data to mongodb using the fetch API and FormData method is a simple process that involves constructing

I have been trying to send data to mongoDB using the fetch API along with FormData, but encountering an error: POST https://xxxxxxxxxxxxxxxxxxxxxxxx/upload 500 (Internal Server Error) The form data in my EJS file appears as follows: <div id=" ...

javascriptfetchform-data

I need help setting up a link in HTML that redirects to the correct webpage when clicked. How can I make this happen smoothly?

<!DOCTYPE html> <html> <head> <title>______</title> <button class="btn about">About</button> <button class="btn socialmedia">Social Media</button></button> <button class ...

htmlcss

Struggling with the task of assigning a glTF item to a separate layer within Three.js

Exploring the use of layers in Three.js. This script includes a sphere, a triangle, and a glTF object (car). I activated a second layer: camera.layers.enable(1); Assigned the sphere, triangle, and glTF object to layer 1: car.layers.set( 1 ); sphere.lay ...

javascriptthree.jslayergltf

React createElement function does not include string children when there are multiple children present within the inner HTML

Currently, I am utilizing React.createElement(...) to dynamically produce a basic react website using data from a JSON file. The JSON file consists of an array of JSON objects that represent elements and their respective children. An individual element&ap ...

cssreactjs

Employing both Angular 1 and Angular 2 in conjunction

As a newcomer to angular, this is my first experience. My ultimate goal is to incorporate the following component into Angular 2: While I have some knowledge of JavaScript, I am attempting to integrate an Angular 1 library into an Angular 2 project. Aft ...

javascriptangularjsangular