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

Question

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.

javascript jquery css

Answer 1

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

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 3

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/

Answer 4

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/

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

Answer №1

Answer №2

Similar questions

Sorting through names within a nested array based on specific criteria

How to send route parameters to a controller function in ExpressJS

Encountering the error message "Attempting to access properties of undefined (specifically 'map')". Despite having the array properly declared and imported

Aligning a Material UI button to the far right of a row

What could be the reason for the Azure server sending a Bad Request response?

Incorporate action icons (such as edit and delete) into a table in React.js using material-ui

Using Console.log() will display 'undefined' prior to receiving any data

Select options with disabled sorting feature

What is the best way to utilize jQuery in order to present additional options within a form?

Error: The reference to 'ko' is not defined while loading with jQuery

What is the best way to display a default image in a kendo grid when the image field is empty?

Using JavaScript to bring in npm packages

Modifying the color of the tooltip arrow in Bootstrap 4: A step-by-step guide

Error occurred while fetching image from Medium story API in Next.js

Exploring the wonders of retrieving JSON data in PHP through an Ajax request

Having trouble properly implementing variable updates when creating a multi-theme website

I possess an item that I must display its title as a <choice> in a <menu> while returning a different variable

JavaScript Array join() method returns an empty string

Identical code exhibiting varying behavior between localhost:3000 and the production server at localhost:5000 on the web

Tips on how to redirect the submit button code to the same page without reloading if feasible