为什么不淡出和淡入jquery？

Question

I've been trying this for several hours

    $('#position-name').html('Successfuly Changed').fadeOut(1000);
    $('#position-name').html('New Name').fadeIn();

I know its simple but, I don't know the reason why If I run those line within my code only New Name that keep showing up despite the given effect.

It fadeOut the New Name and then FadeIn the New Name again

why Is it not fading out or showing successfully changed ?

Answer 1

The problem is: Your code reads like -change the element html to 'Successfuly Changed' -then while fadOut() with 1000 its directly change to 'New Name' -so you can see it fadeOut() and then fadeIn() .. To avoid that you need to use fadeOut() callback function

 $('#position-name').html('Successfuly Changed').fadeOut(1000 ,function(){ $(this).html('New Name').fadeIn(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="position-name"></div> 

Answer 2

Both fadeOut and fadeIn are asynchronous functions. Meaning, that once you call them, the action will happen in the background and your code immediately returns and continues onto the next statement.

In your example, you start a fadeout over a second, but as soon as it starts you replace the content of the div and fade in. Because the fadeout has only run for a microsecond, jquery internally cancels the fadeOut action and runs a fadeIn which doesnt need to do anything.

Both these functions take a second parameter which is a 'complete' callback. You should structure your code as follows.

  $('#position-name').html('Successfuly Changed').fadeOut(1000, 
    function () {
      $('#position-name').html('New Name').fadeIn();
  });

Answer 3

 $( "#clickme" ).click(function() { var message = $('#position-name'); message.html('Successfuly Changed').fadeOut(1000, function() { message.html('New Name').fadeIn("slow"); }); }); 

 #box { width: 200px; height: 50px; outline: 2px solid; line-height: 50px; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> You can add the next animation in the callback funciton of fadeOut. After 1 second of the fadeout animation the new fadeIn will start. <div id="box"> <div id="position-name"></div> </div> <button id="clickme">CLICK ME</button>