Question

so I have this site: http://webzilla-il.com/contactus.php , now i know it’s not in english but the text isn’t important what’s important is the jquery, try click on each image on the purple area, as you can see a div slide’s down with some texts, now try clicking fast on the images one after another, the divs are showing before the sliding up has finished and making it look bad…

My code so far is:

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

My 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:[e-mail]">[e-mail]</a></h6>
            <div id="breaker"><img src="img/Contact/shadow_breaker.png" alt="breaker" /></div>
            <div class="emails">
                <h5><a class="cf" href="mailto:[e-mail]">[e-mail]</a></h5>
                עמית לונדנר
            </div>
            <br />
            <div class="emails">
                <h5><a class="cf" href="mailto:[e-mail]">[e-mail]</a></h5>
                דן ברזילי                   
            </div>
        </div>
    </div>

As you can see i have tryed promise().done()…

Thanks for your help.

Answer 1

something more simple,

is this what u are trying to reach?

Demo