0

Jqueryによってアニメーション化された、自分のサイトの小さなヘルプボックスを使用したいと思います。すべてが大丈夫です、しかし私がすぐに箱から出入りするとき、それは狂ったように隠れているangを示し始めます。機能隠しボックスを停止する方法はありますか？これが私のヘルプボックスです：http：//jojo.i-web.sk/test/box.php

これはコードです：

<body>
    <center>!!LOOK AT DOWN RIGHT CORNER!!</center>
    <div id="help-box">
        <div id="help_sipka">
            <<
        </div>
        <div id="help_problem_nadpis">
            <h1>Do you have problem?</h1>
            Click here.
        </div>
        <div id="help_problem_button">
            <div style="float:right;"><acronym title="Zatvoriť"><input id="help_zavri" class="button_zavri" type="button" value="X"></acronym></div>
            <h1>Do you have problem?</h1>
            Have you lost password or found bug? Do you need help<br>
            We can help you.<br>
            Send mail to our admins.<br>
            <input class="button_odosli" type="button" name="posli_mail" value="Send mail">
        </div>
    </div>
    <script type="text/javascript">
        $(function() {
        var help_finished=1;

            $('#help-box').mouseenter(function(){
                if(help_finished!=2) {
                    help_finished=1;
                    $('#help-box').animate({width:'200'});
                    $('#help_sipka').delay(500).slideUp();        
                    $('#help_problem_nadpis').delay(500).slideDown();
                }
            });

            $('#help-box').mouseleave(function(){ 
                if (help_finished ==1) {
                    setTimeout(hide_box, 500);
                    help_finished=0;
                }
            });

            function hide_box() {
                if (help_finished==0||help_finished==3) {
                    $('#help_sipka').slideDown();        
                    $('#help_problem_nadpis').slideUp();
                    $('#help-box').delay(300).animate({width:'30'});
                }  
            }

            $('#help_zavri').click(function(){
                help_finished=3
                $('#help_problem_button').slideUp();
                $('#help-box').animate({opacity:'0.75'});
                hide_box();        
            });

            $('#help-box').click(function(){
                if(help_finished!=3) {
                    help_finished=2;
                    $('#help-box').animate({opacity:'1'});
                    $('#help_problem_button').slideDown(); 
                    $('#help_problem_nadpis').slideUp(); 
                }
            });
        });
    </script>
</body>
4

3 に答える 3

2

jquerystopメソッドを使用します。

// Will stop the current animation and then start a fadeout.
$(this).stop(true, true).fadeOut();

したがって、あなたの例では、これを行うことができます：

$('#help-box').stop(true,true).animate({width:'200'});

また、完成したデリゲートを使用して、前のアニメーションの後に次のアニメーションを起動するように見えるため、遅延をハードコーディングする必要はありません。

$('#help-box').stop(true,true).animate({width:'200'}, function () {
        $('#help_sipka').slideUp(function () {
           $('#help_problem_nadpis').slideDown();
        }); 
 });

タイムアウトを使用しているので、新しいタイムアウト関数を設定する前に、 clearTimeoutを使用して、それを変数に保持し、クリアする必要があります。

// keep this variable scoped outside the method call.
var timeout;

//... Whenever you set the timeout, clear it before you set a new one.
clearTimeout(timeout);
timeout = setTimeout(hide_box, 500);
于 2013-01-17T23:55:13.347 に答える
1

はい、.stop()です。

新しいアニメーションを開始するときに、これを行うことができます。

$('selector').stop(true, true).animate({});

stop()これらのパラメータを使用すると、jQueryのアニメーションキューがクリアされ、現在のアニメーションが強制的に停止され、進行中のアニメーションがすぐに開始されます。

ドキュメンテーション

于 2013-01-17T23:55:03.473 に答える
1

あなたはこれを求めている：

$(this).stop(true);

jQuery .stop（）ドキュメント-http: //api.jquery.com/stop/

于 2013-01-17T23:56:19.797 に答える