如何等待直至效果結束？ （我看着重複）

Question

所以我有這個網站：http://webzilla-il.com/contactus.php，現在我知道它不是英文，但文本並不重要什麼是jQuery的重要，請嘗試點擊紫色區域上的每個圖像，你可以看到一個div幻燈片的一些文章了，現在就來試試點擊快速上一個又一個，在申報單顯示向上滑動完成之前的圖像，並使它看起來很糟糕......

到目前爲止我的代碼是：

//Contact us 
$(document).ready(function(){ 
    $(".box").click(function(){ 
     var name = $(this).attr("name"); 
     $(".sform").slideUp().promise().done(function() {     
      switch(name){ 
       case "skype": 
        $('.sform[name="'+name+'"]').next().promise().done(function() {$(this).css("margin-left","4px")}); 
        $('.sform[name="'+name+'"]').slideDown(); 
        break; 
       case "form": 
        $('.sform[name="skype"]').next().promise().done(function() {$(this).css("margin-left","60px")}); 
        $('.sform[name="'+name+'"]').slideDown(); 
        break; 
       case "email": 
        $('.sform[name="skype"]').next().promise().done(function() {$(this).css("margin-left","60px")}); 
        $('.sform[name="'+name+'"]').slideDown(); 
        break; 
      } 
     });    
    }); 
}); 

我的HTML：

<div id="contact_forms"> 
     <div class="cform sform" style="margin-left: 60px; display: none;" name="skype"> <!--Skype--> 
      <div class="skypes"> 
      <h5><a class="cf" href="skype:londneramit">londneramit</a></h5> 
       עמית לונדנר 
      </div> 
      <br /> 
      <div class="skypes" name="skype"> 
       <h5><a class="cf" href="skype:dan_barzilay">dan_barzilay</a></h5> 
       דן ברזילי 
      </div> 
     </div> 
     <div class="cform" style="margin-left: 60px; visibility: hidden;"></div> 

     <div class="cform sform" name="form"> <!--Form--> 
      <div id="webzilla_contact_us" style="border: none;"> 
       <form method="POST" onsubmit="return contactUs(this)"> 
        <input type="text" name="name" /> 
        <input type="email" name="email" /> 
        <input type="text" name="title" /> 
        <br style="clear: both;" /> 
        <textarea name="content"></textarea> 
        <input type="submit" name="contactsub" value="שלח!"/> 
       </form> 
      </div> 
     </div> 
     <div class="cform" style="visibility: hidden;"></div> 

     <div class="cform sform" style="display: none;" name="email"> <!--Email--> 
      <h6><a class="cf" href="mailto:webzilla-il@gmail.com">webzilla-il@gmail.com</a></h6> 
      <div id="breaker"><img src="img/Contact/shadow_breaker.png" alt="breaker" /></div> 
      <div class="emails"> 
       <h5><a class="cf" href="mailto:londner.amit@gmail.com">londner.amit@gmail.com</a></h5> 
       עמית לונדנר 
      </div> 
      <br /> 
      <div class="emails"> 
       <h5><a class="cf" href="mailto:barzilaydn@gmail.com">barzilaydn@gmail.com</a></h5> 
       דן ברזילי     
      </div> 
     </div> 
    </div> 

正如你可以看到我已經tryed承諾（）。完成（）...

感謝您的幫助。

Answer 1

東西更簡單，

這是什麼原因你企圖達到？

Demo

Answer 2

編輯：

$('.sform').not(":visible").slideUp(function() { 
      // will be called when the element finishes fading out 
      // if selector matches multiple elements it will be called once for each 
      switch(name){ 
        case "skype": 
         $('.sform[name="'+name+'"]').next().promise().done(function() {$(this).css("margin-left","4px")}); 
         $('.sform[name="'+name+'"]').slideDown(); 
         break; 
        case "form": 
         $('.sform[name="skype"]').next().promise().done(function() {$(this).css("margin-left","60px")}); 
         $('.sform[name="'+name+'"]').slideDown(); 
         break; 
        case "email": 
         $('.sform[name="skype"]').next().promise().done(function() {$(this).css("margin-left","60px")}); 
         $('.sform[name="'+name+'"]').slideDown(); 
         break; 
       } 

     }); 

Documentation

Answer 3

試試這個

$(".sform").stop(true, true).slideUp().promise().done(..) 

這可能給一些運氣：

$(".sform:animated").slideUp(100).promise().done(..) 

或

$(".sform:animated").slideUp(100, function() { 
    switch(name) {...} 
}) 

您可以檢查出duration

Answer 4

我的工作的防火牆沒有讓我看看你的網站出於某種原因，而是看你的代碼，你也許能夠使用的回調嘗試而不是：

$(".sform").slideUp(function() {     
    switch(name){ 
     case "skype": 
      $('.sform[name="'+name+'"]').next().promise().done(function() {$(this).css("margin-left","4px")}); 
      $('.sform[name="'+name+'"]').slideDown(); 
      break; 
     case "form": 
      $('.sform[name="skype"]').next().promise().done(function() {$(this).css("margin-left","60px")}); 
      $('.sform[name="'+name+'"]').slideDown(); 
      break; 
     case "email": 
      $('.sform[name="skype"]').next().promise().done(function() {$(this).css("margin-left","60px")}); 
      $('.sform[name="'+name+'"]').slideDown(); 
      break; 
    } 
});  

Answer 5

這是因爲你每次點擊任何一個對象時都會對所有的方框調用SlideUp。

$(".sform").not(":visible").slideUp().promise().done(function() {  

...