Question

我想在我的网站上使用小帮助框，由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>

Answer 1

使用jquery stop方法：

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

Answer 2

是的，它是.stop()。

当你开始一个新动画时，你可以这样做。

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

带有这些参数的

stop()清除jQuery的动画队列并强制当前动画停止，允许立即开始进行动画。

<强> Documentation

Answer 3

你想要这个：

$(this).stop(true);

jQuery .stop（）docs - http://api.jquery.com/stop/

如何停止jquery函数

3 个答案: