Home/ Questions/Q 9148431
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T11:16:11+00:00

I want to use little help box on my site, animated by Jquery. everything

  • 0

I want to use little help box on my site, animated by Jquery. everything is ok, but when I quickly go in and out of box, it start showing ang hiding like crazy. Is there any way how to stop function hiding box?
Here is my help box: http://jojo.i-web.sk/test/box.php

this is code:

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use the jquery stop method:

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

    So in your example, you might want to do this:

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

    Also, you can look firing the next animation after the previous by using the finished delegate, so you don’t need to hardcode delays:

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

    Since you are using timeouts, you will need to keep that around in a variable and clear it, using clearTimeout before you set a new timeout function:

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