CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dan Barzilay
Dan Barzilay

Reputation: 4983

how to wait untill end of effect? (i looked at duplicates)

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

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

Thanks for your help.

Upvotes: 0

Views: 186

Answers (5)

Ricardo Binns
Ricardo Binns

Reputation: 3246

something more simple,

is this what u are trying to reach?

Demo

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

try this

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

This may give some luck:

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

oR

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

You may check with out duration

Upvotes: 0

Farhan Ahmad
Farhan Ahmad

Reputation: 5198

Edit: 

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

Upvotes: 1

Ivan Drinchev
Ivan Drinchev

Reputation: 19581

It is because you are calling SlideUp to ALL of the boxes every time you click on any of them.

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

...

Upvotes: 0

captbrogers
captbrogers

Reputation: 494

My work firewall isn't letting me see your website for some reason, but looking at your code, you might be able to try using the callback of instead:

$(".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;
    }
});

Upvotes: 0

Related Questions