CODEWITHSUNDEEP
javascriptjqueryhtmlcssshow-hide
Ram Iyer
Ram Iyer

Reputation: 57

Jquery Hide/Show happening repeatedly on hover

So I have two divs that are placed exactly on top of each other and have the same dimensions. By default div A should be shown but when someone hovers over the area, div A has been programmed by Jquery to .hide() and div B has been programmed to .show() . In the same way, when the hovering ends, the display should go back to default. I have done this using the .mouseover() and .mouseout() functions.

When I pass no arguments with the show() and hide() functions, it works perfectly. But suppose I do something like .show(800) and .hide(800) or .show("slow") and .hide("slow") the animation keeps happening repeatedly for a while and then stops. Div B shows, then hides and at the same time Div A hides and shows, repeatedly. The .mouseover() / .mouseout() function is applied to the parent div of both A and B.

I am aware of the .stop() function and that solves the problem to a great extent but not quite. I have hyperlinked text on Div B where the link hover animation keeps flickering when Div B is shown.

Here is a link to the website. http://nd2cindia.com/test_teams_display/ (I am using .show() and .hide() functions for now until this problem is resolved. )

Here is my Jquery 

$(".parent").mouseover(function () {
  $("> .A", this).hide("800");
  $("> .B", this).show("800");
});

$(".teambox").mouseout(function () {
  $("> .A", this).show("800");
  $("> .B", this).hide("800");
});

Upvotes: 1

Views: 1111

Answers (3)

Darren L
Darren L

Reputation: 94

In your HTML, you had duplicate IDs (#team_name_id). This is not valid, so I removed the IDs and added a class - you should make your own changes, which will cause you to update your CSS.

Firstly, I've created a named function which you can apply to your events instead of an anonymous one - it's often better to do this, as it allows you to separate your concerns - and is more DRY.

Secondly, because you're toggling, and there is no other logic required - you can use a single function. You may want to separate this out in the future to give you batter control and logic.

var hoverToggle = function () {
  // Toggling an element will bring it into view or hide it, and it will do so with a queue.
  // Anything more complex than this, you'll need to make your own queue
  $(this).find('.players_display, .beforehover').stop().toggle(800)
}

You'll notice that I've use 'this' which provides context and stops the events bubbling outside of the boxes you've created. It also means they're easier to find.

You'll also notice that I've used a comma separated selector which finds both sets. Another benefit of using a toggle is that it'll treat each element independently. So, while one show()s the other hide()s.

I find hover() to be a better function call - as it make tidier code. Simply call your function within it. The same can be done with other functions other than hover () if you prefer.

$('.teambox').hover(hoverToggle, hoverToggle);

jsFiddle to demo: https://jsfiddle.net/likestothink/ndfbhw02/1/

Upvotes: 0

caldera.sac
caldera.sac

Reputation: 5088

this is what you want.I wrote style internally.you can change it as you want.

<html>
<head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</head>
<body>

<div class="a" style="width:100px;height:100px;background-color:green; position:absolute;top:10px;left:10px;">
</div>
<div class="b" style="width:100px;height:100px;background-color:orange;position:absolute;left:10px;top:10px">
</div>


<!-- js--> 
<script type="text/javascript">
 $(document).ready(function(){
    $(".b").mouseenter(function(){
        $(this).fadeOut(1000,function(){
            $(this).mouseleave(function(){
                $(this).fadeIn(1000);
            });
        });
    });

 });
</script>

</body>
</html>

hope this will help to you. I suggest you to use mouseenter and mouseleave instead of mouseover and mouseout.

Upvotes: 0

Michal Miky Jankovsk&#253;
Michal Miky Jankovsk&#253;

Reputation: 4243

I am every time using:

$("selector").stop().show();
$("selector2").stop().hide();

It stops all running animations and run from actual state.

Upvotes: 2

Related Questions