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

これは、いずれかのボックスをクリックするたびに、すべてのボックスに対してSlideUpを呼び出しているためです。

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

...
于 2012-05-08T19:13:17.327 に答える
0

もっとシンプルなもの、

これはあなたが到達しようとしているものですか？

デモ

于 2012-05-08T19:45:26.547 に答える
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 に答える