jQuery Panel - slideOut和fadeIn函數同時出現問題

Question

我正在使用一些jQuery，特別是對於錯誤和感謝消息。 jQuery的一部分可以在這裏查看：
http://jsbin.com/ohuya3
表單的一個工作示例可在此處獲得：
http://cozyphant-living.com/php/formular4.htm
您必須點擊「Formular senden」按鈕才能看到消息面板。
我想讓謝謝和/或錯誤面板滑出並讓文本淡入。腳本正在接受我的代碼（因爲它仍在工作），但實際上我看不到文本實際上已淡入。已經看到滑動面板的文字漸變的樣本。所以這似乎是我做的一種錯誤的編碼。
任何幫助表示讚賞。

Answer 1

的問題是，你的#formResponse容器不是隱藏在第一。 。一旦響應文本插入到它，它會直接顯示，而不是衰落，你需要聲明display: none;隱藏它：然後

<div class="contact-form-text" id="formResponse" style="display: none;"></div> 

Ajax回調函數將插入文字吧，然後消除它在

---

更新：如果你想BOTH幻燈片和，那麼你將需要使用額外的反應容器，因爲它一旦滑出時，淡入淡出它IS a已經可見並且不能從100％的可見度中淡入。所以，你想會是這樣的：

<div id="formResponse_container" style="display:none;"> <!-- extra wrapper --> 
    <div id="formResponse" class="contact-form-text" style="display:none;"></div> 
</div> 

，然後在jQuery腳本，而不是

$("#formResponse").hide().html(data).show('slow'); //hide before slide! 

你會

$("#formResponse_container").slideDown("slow", function() { 
    $("#formResponse").html(data).fadeIn("slow"); 
}); 

那是什麼呢，它會首先向下滑動外部容器，一旦該動畫完成，它將在內部容器中褪色。

Live example

希望這有助於。

Answer 2

使用.show()與同時滑動+持續時間淡出你的情況，你想要的效果，：

$("#formResponse").html(data).show('slow') 

You can test out the effect here。

---

爲您的代碼具體你需要從#formResponse對象中刪除margin: 0 auto;，導致與上面的動畫代碼的麻煩。還可以序列中位的形式更容易鄰維護方式，這樣整體：

$("#contact_form").submit(function() { 
    var arr = $(this).serializeArray();   //serialize form, based on names 
    arr.push({ name: 'senden', value: 'yes' }); //add the senden variable 
    $.post('mail.php', arr, function(data) { //pass that object as your data 
    $("#formResponse").hide().html(data).show('slow'); //hide before slide! 
    }, 'text'); 
    return false; 
});