Question

I’m trying to fade out a div on a click but also change some css values.

the issue im having is that the values change while the fade out is happening (too early). I need the values to change once the fade out has finished:

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

Now when i run that, everything works but just not exactly how i’d like it.. I need the css values to be changed once the fadeout has finished, not while it’s still happening.

is this possible?

if so, any ideas how?

thank you.

Answer 1

Use a callback function to modify the .css() as the second parameter to fadeOut(). It will fire when the fade completes.

<script type="text/javascript">

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