0

我想在我的网站上使用由 Jquery 动画制作的小帮助框。一切都很好，但是当我快速进出盒子时，它开始像疯了一样躲藏起来。有什么办法可以停止功能隐藏框？这是我的帮助框：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

使用 jquery停止方法：

// 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 回答