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

Answer 2

试试这个

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

这可能会带来一些好运：

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

或

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

您可以查看duration

Answer 3

我的工作防火墙不允许我出于某种原因看到您的网站，但查看您的代码，您可能可以尝试使用回调：

$(".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 4

这是因为您每次点击其中任何一个时都会调用SlideUp。

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

...

Answer 5

更简单的事情，

这是你想要达到的目标吗？

Demo

如何等到效果结束？（我看了重复）

5 个答案:

如何等到效果结束？ （我看了重复）

5 个答案:

如何等到效果结束？（我看了重复）