jQuery show/hide element when hovering another element

Question

I have the following HTML as an example:

<div id="header">
<div class="pagination"></div>
</div>

and the following jQuery which should hide the pagination by default but then fade it in when a user hovers the header and then fades it back out when they move off the header:

            $(".pagination").hide();
            $("#header").mousemove(function()
            {
                $(".pagination").fadeIn(1500);
            });
            $("#header").mouseleave(function()
            {
                $(".pagination").fadeOut(1500);
            });

The problem I have is that it will run through the code the same number of times a user hovers the header so for example if I hovered 5 times in a row the pagination would fade in and out 5 times. This is not the function I want, rather a simple fade in and out when a user is hovering the header.

Can anyone help? Thanks.

As an aside, you could chain those as well $("header").mousemove(...).mouseleave(...); — Marc
– Marc, Commented May 16, 2011 at 17:34

Vincent Ramdhanie · Accepted Answer · 2011-05-16 21:23:07Z

4

Edited: Added some code to avoid repeated fading in and out.

     var running = false;

     $("#header").hover(function()
        {
            if(!running){
               $(".pagination").fadeIn(1500);
               running = true;
            }
        }, function()
        {
            $(".pagination").fadeOut(1500, function(){
                running = false;
            });
        });

Now, the hover effect only kicks in if it is not already running.

edited May 16, 2011 at 21:23

answered May 16, 2011 at 17:29

Vincent Ramdhanie

103k23 gold badges143 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cameron Over a year ago

Still fades the pagination in x number of times though!

Roko C. Buljan · Accepted Answer · 2011-05-16 17:42:28Z

2

well than instead of fadeIn - fadeOut just use .fadeTo like in my

JSFiddle DEMO

And to stop the issue you are talking about use .stop()

Good Luck!

answered May 16, 2011 at 17:42

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

2 Comments

Cameron Over a year ago

That works :) Seem like stop() was the magic bit of code I was looking for. Cheers

Roko C. Buljan Over a year ago

@Cameron not exactly! use .stop() with fadeIn or fadeOut and you'll get another issue! try and see! :) Take care. ..and thanks

Collectives™ on Stack Overflow

jQuery show/hide element when hovering another element

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related