1

I have a simple script with a button contained in a DIV with an ID of label. When hovered another div with an id of content is revealed. Both DIV's are contained into a DIV with an id of basket-top. The hover call is attached to this div. Here is the HTML:

<div id="basket-top">
    <div id="content"><br />
            <br />
            content here<br />
            <br />
    </div>
    <div id="label">label here</div>
</div><!-- /basket-top -->

Here is the JS:

$("#basket-top").hover( function () {
    $("#basket-top #content").slideDown(500);
}, function () {
    $("#basket-top #content").slideUp(500);
});

This is working fine until the user goes in and out quickly which calls the function over and over again and the the layer slides up and down several times. Is there a way to block the function from being called if the previous action is not completed?

BenMorel
  • 34,448
  • 50
  • 182
  • 322
user1620090
  • 499
  • 6
  • 19
  • 1
    Possible duplicate: http://stackoverflow.com/questions/2360209/cancel-all-queued-jquery-slideup-and-slidedown-animations – lolol Feb 05 '13 at 17:04

2 Answers2

0

First, "#basket-top #content" is unnecessary since IDs must be unique. "#content" is sufficient. Second, see jQuery's .stop() function.

$("#basket-top").hover( function () {
    $("#content").stop(true,true).slideDown(500);
}, function () {
    $("#content").stop(true,true).slideUp(500);
});
j08691
  • 204,283
  • 31
  • 260
  • 272
  • Thanks, it works both ways but you are right #content is unique so I could use it without #basket-top. Many thanks – user1620090 Feb 06 '13 at 09:09
0

This will show the content division when you hover over label

$("#content").hide();
$("#label").hover(function () {
    $("#content").stop(true, true).slideDown(500);
}, function () {
    $("#content").stop(true, true).slideUp(500);
});

JsFIDDLE HERE

Also on a side note, you should go through all of the questions that you have asked on here and accept the correct answers. This will make other's want to help you when you post new questions. And thank those that spent there time helping you.

ROY Finley
  • 1,406
  • 1
  • 9
  • 18
  • Hi There, thanks for your help. Adding .stop() has sorted the problem. The event still have to be attched to #basket-top thus as #label is pushed down when hovered which calls the mouse out even straight away. Replying to your side note, I believe having always thanked people assisting by leaving a message. I am guessing what you mean is that I should answer "Was this post usefull to you". Some how I did not note it before and will in the future. Thanksa for the comment – user1620090 Feb 06 '13 at 09:05
  • @user1620090, you can accept the correct answer, that is what the green check make on the left side of a question means. By accepting an answer it lets everyone know that you have been helped by the answer provided – ROY Finley Feb 06 '13 at 11:16