CODEWITHSUNDEEP
jqueryfunctionanimation
jojo3696
jojo3696

Reputation: 3

How to stop jquery function

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>

Upvotes: 0

Views: 1978

Answers (3)

John Koerner
John Koerner

Reputation: 38079

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

Upvotes: 2

Cedias
Cedias

Reputation: 904

You want this:

$(this).stop(true);

jQuery .stop() docs - http://api.jquery.com/stop/

Upvotes: 1

Austin Brunkhorst
Austin Brunkhorst

Reputation: 21130

Yes, it's .stop().

When you start a new animation you can do this.

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

stop() with those parameters clears jQuery's animation queue and forces the current animation to stop, allowing the the proceeding animation to start immediately.

Documentation

Upvotes: 1

Related Questions