jquerychainfadeto

When Chaining fadeTo, the second animation doesn't happen

I want to fade out an element, update it, and fade it back in using two fadeTo calls chained together. The issue is that the second animation doesn't happen - the element pops back in.

I've seen some suggestions of chaining the animations together, but that won't work for me, I believe, because I need to fit in the update of the content.

$(tgt).fadeTo(1000,0, function () {
  $(tgt).html(stufffromAjax);
  $(tgt).fadeTo(1000,100);
});

I expect the fade out to take one second, and then after the update, to have it fade back in taking one second, but it pops in immediately. Any suggestions would be appreciated.

Solution

  • The second argument to fadeTo is the opacity. The range of opacity is a float value of 0 to 1.00, so you need to fade in to 1, not 100.

    var $target = $('#target').fadeTo(1000,0, function () {
  $target.html('Changed');
  $target.fadeTo(1000,1);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="target">Fade Me</div>