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

Question

我有下面的函数，它第一次被调用时正常工作，但在第二次函数调用时，只有 alert 正在工作。 任何人都可以帮助我解释为什么接下来的三行在第二个，第三个等电话中不起作用

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

第一次调用使用fadeOut隐藏#msg元素。 如果您希望它在后续调用中再次显示，请显示：

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

Answer 2

删除#msg内容并在淡出完成时重新显示它

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

Answer 3

这是一个显示如何解决问题的示例，我设置了 Intervals 以显示两个函数之间的差异。

正在调用第一个调用，但是在再次淡出之前您没有再次显示msg 。 所以看起来它实际上没有工作，然后在第二个使用fadeOut()之前使用.show()再次显示消息

 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>