JavaScript 淡出功能在第二次调用时不起作用

Question

I have the below function which is working properly for the first time it is called, but on second function call only alert is working . Can any one pl help me on why the next three lines dosen't work on second, third and so on calls

function loginData(){ 
        var form = $("#signInForm");
    $.ajax({
            type: 'POST',
            url: '/signin/signin',
            data: form.serialize(),
            success: function(data){           
        if(data == "Success")
        { 
            location.replace('<?php echo BASE_HREF ?>/profile');    
        }
        else
        { alert("hello");//this alert is coming but next three lines don't get executed second and next all time
          $('#msg').text(data);
          $('#msg').css('color', 'red');    
          $('#msg').fadeOut(2000);
        }               
        //$('#msg').text('<?php echo $errormsg[jserr_msg]; ?>');    
        }                                         
         });                    
    }

Answer 1

The first call hides the #msg element using fadeOut . If you want it to show again on subsequent calls, show it:

$('#msg').text(data);
$('#msg').css('color', 'red');    
$('#msg').show();
$('#msg').fadeOut(2000);

Answer 2

Remove #msg contents and redisplay it when the fadeout is complete

$('#msg').fadeOut(2000, function(){
   $('#msg').empty();
   $('#msg').show();
});

Answer 3

Here an example showing how you can fix your problem, I've set Intervals to show the difference between both functions.

The call on the first one is being called, however you're not showing the msg again before fading it out again. So it'll look like it's not actually working, then with the second one it displays the message again by using .show() before using fadeOut()

 setInterval(function(){ notWorkingAgain() }, 2000); setInterval(function(){ WorkingAgain() }, 2000); function notWorkingAgain() { $('#msg').text("ERROR MESSAGE OR SUCCESS"); $('#msg').css('color', 'red'); $('#msg').fadeOut(4000); } function WorkingAgain() { $('#msg2').text("ERROR2 MESSAGE OR SUCCESS"); $('#msg2').css('color', 'red'); $('#msg2').show(); $('#msg2').fadeOut(4000); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="msg"> ERROR MESSAGE OR SUCCESS </div> <div id="msg2"> ERROR2 MESSAGE OR SUCCESS </div>