javascript - 如何等到效果结束？ (我看了重复的)

Question

所以我有这个网站:http://webzilla-il.com/contactus.php ，现在我知道它不是英文的，但文本并不重要重要的是 jquery，尝试单击紫色区域的每个图像，因为您可以看到带有一些文本的 div 幻灯片，现在尝试快速单击图像一个接一个，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>

如您所见，我已经尝试了 promise().done()...

感谢您的帮助。

Answer 1

编辑:

 $('.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