fadeOut，removeClass在addClass後不工作

Question

我有一個簡報註冊表單，我正在爵士樂上。下面我有這個jQuery腳本：

$(document).ready(function(){ 
$('#newsletter-signup').submit(function(){ 

    //setup variables 
    var form = $(this), 
    formData = form.serialize(), 
    formUrl = form.attr('action'), 
    formMethod = form.attr('method'), 
    responseMsg = $('#signup-response'); 

    //show response message - waiting 
    responseMsg.hide() 
       .addClass('response-waiting') 
       .text('Please Wait...') 
       .fadeIn(200); 

    //send data to server for validation 
    $.ajax({ 
     url: formUrl, 
     type: formMethod, 
     data: formData, 
     success:function(data){ 

      //setup variables 
      var responseData = jQuery.parseJSON(data), 
       klass = ''; 

      //response conditional 
      switch(responseData.status){ 
       case 'error': 
        klass = 'response-error'; 
       break; 
       case 'success': 
        klass = 'response-success'; 
       break;  
      } 

      //show reponse message 
      responseMsg.fadeOut(200,function(){ 
       $(this).removeClass('response-waiting') 
         .addClass(klass) 
         .text(responseData.message) 
         .fadeIn(200,function(){ 
          //set timeout to hide response message 
          setTimeout(function(){ 
           responseMsg.fadeOut(200,function(){ 
            $(this).removeClass(klass); 
           }); 
          },3000); 
         }); 
      }); 
      } 
    }); 

    //prevent form from submitting 
    return false; 
}); 
}); 

，倘若你有興趣，這裏是我的PHP的片段（除去數據庫憑據）：

<?php 
if(isset($_GET['action'])&& $_GET['action'] == "signup"){ 
mysql_connect(***REMOVEDforprivacy*******); 
mysql_select_db(***REMOVEDforprivacy*******); 

//sanitize data 
$email = mysql_real_escape_string($_POST['signup-email']); 

$to ='***REMOVEDforprivacy*******'; 
$subject = '***REMOVEDforprivacy*******'; 
$body = "The email address ". $email. " has been added to the email database."; 
$headers = 'From: ***REMOVEDforprivacy*******' . "\r\n" . 
      'Reply-To: ***REMOVEDforprivacy*******' . "\r\n" . 
      'X-Mailer: PHP/' . phpversion(); 

//validate email address - check if input was empty 
if(empty($email)){ 
    $status = "error"; 
    $message = "You did not enter an email address!"; 
} 
else if(!filter_var($email, FILTER_VALIDATE_EMAIL)){ //validate email address - check if is a valid email address 
    $status = "error"; 
    $message = "You have entered an invalid email address!"; 
} 
else { 
    $existingSignup = mysql_query("SELECT * FROM signups WHERE email_address='$email'"); 
    if(mysql_num_rows($existingSignup) < 1){ 



     $insertSignup = mysql_query("INSERT INTO signups (email_address) VALUES ('$email')"); 
     if($insertSignup){ 
      $status = "success"; 
      $message = "You have been signed up!"; 
      mail($to, $subject, $body, $headers); 
     } 
     else { 
      $status = "error"; 
      $message = "Oops, There has been a technical error!"; 
     } 
    } 
    else { 
     $status = "error"; 
     $message = "Looks like you have already registered this email address with us. Thank you for your support!"; 
    } 
} 

//return json response 
$data = array( 
    'status' => $status, 
    'message' => $message 
); 

echo json_encode($data); 

exit; 
} 


?> 

一切工作順利了這裏：

//show reponse message 
      responseMsg.fadeOut(200,function(){ 
       $(this).removeClass('response-waiting') 
         .addClass(klass) 
         .text(responseData.message) 
         .fadeIn(200,function(){ 
          //set timeout to hide response message 
          setTimeout(function(){ 
           responseMsg.fadeOut(200,function(){ 
            $(this).removeClass(klass); 
           }); 
          },3000); 
         }); 
      }); 

我不明白這裏有什麼問題。語法似乎沒問題，但是，當我嘗試刪除大部分內容並僅使用responseMsg.fadeOut(200);時，responseMsg不會褪色（因此您可以忘記刪除類並添加新類）。我已經用Firebug檢查過了，POST響應確實顯示正確的錯誤並且成功消息正在返回......（並且實際上檢查我的數據庫，條目被添加並且發送了一個警告郵件）......所以除了花哨的schnazzy JQuery特效之外，所有工作都正常。我簡單地以爲我從頁面上的另一個元素有一個JQuery衝突，所以我刪除了它，並沒有改變。我嘗試使用$ .noconflict（），$ .noconflict（true），並用JQuery替換$的所有實例（但是，然後，頁面上的其他項目無論如何都沒有衝突）。我嘗試刪除調用以添加「響應等待」類，並在數據的JSON解析之後添加響應消息類，但沒有奏效。我幾乎從this awesome tutorial複製和粘貼這個腳本，所以我不知道爲什麼它不起作用。任何人都有線索？

UPDATE

這裏FWIW是JSFiddle，但它絕對不會沒有PHP DB東西工作....不知道我怎麼能解決的是，球員....

更新搞定了，愚蠢的錯誤將我的PHP代碼放在我的html標題之上......只要我被允許，就會盡快回復。

Answer 1

你需要成功函數之前聲明克拉斯變量，因此它的檢索通過回撥功能，而是採用了setTimeout的，只需用.delay（）

Answer 2

我的意思是你應該修剪下來的代碼複製你的問題。一般來說，你會發現你的問題。這工作正常（僅通過射擊點擊事件模擬表單提交）：

http://jsfiddle.net/k8nhR/3/

$(document).ready(function(){ 
    $('#signup-button').click(function(){ 

     responseMsg = $("#signup-response"); 
       //show response message - waiting 
     responseMsg.hide() 
        .addClass('response-waiting') 
        .text('Please Wait...') 
        .fadeIn(200); 

     var responseData = { status : "success", message: "success message"}; 
       var klass = ''; 

       //response conditional 
       switch(responseData.status){ 
        case 'error': 
         klass = 'response-error'; 
        break; 
        case 'success': 
         klass = 'response-success'; 
        break; 
       } 

       //show reponse message 
       responseMsg.fadeOut(200,function(){ 
        $(this).removeClass('response-waiting') 
          .addClass(klass) 
          .text(responseData.message) 
          .fadeIn(200,function(){ 
           //set timeout to hide response message 
           setTimeout(function(){ 
            responseMsg.fadeOut(200,function(){ 
             $(this).removeClass(klass); 

            }); 
           },3000) 
          }); 
       }); 
     }); 
    });