0

所以我有这个网站：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()...

谢谢你的帮助。

4

5 回答 5

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;
                }

        });

文档

于 2012-05-08T19:06:47.213 回答
0

试试这个

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

这可能会带来一些运气：

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

或者

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

你可以检查一下duration

于 2012-05-08T19:11:38.880 回答
0

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

$(".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;
    }
});
于 2012-05-08T19:12:14.920 回答
0

这是因为每次单击其中任何一个时，您都会将 SlideUp 调用到所有框。

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

...
于 2012-05-08T19:13:17.327 回答
0

更简单的东西，

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

演示

于 2012-05-08T19:45:26.547 回答