Question

i know that it may be difficult to see the actual problem without looking throughout the whole script, but i’m curious if its a little buggy for anybody who has done a hover function and use show and hide.

My problem is that sometimes my element wouldn’t show up, but when I move my mouse out and hover over again it shows. Its just not consistent of showing the element

$('.Item').hover(function(){
    var container = $(".show-element",this).attr("id");
    $('#'+container ).show();
},function(){
    var container = $(".show-element",this).attr("id");
    $('#'+container ).fadeOut(200);
});

<div class='Item'>
<div class='show-element' id='1'>Show</div>
<div id='1'>
some stuff
</div>

<div class='show-element' id='2'>Show</div>
<div id='2'>
some stuff
</div>
<!-- and so forth !-->
</div>

so this HTML shows a few div elements and my page has a while loop scripting through multiple elements.

Is there another way to do a hover a better way for consistency?

Answer 1

You most likely just need to stop and end the animation. Hovering off multiple times before the 200ms has expired can produce undesired effects.

$('.Item').hover(function(){
    var container = $(".show-element",this).attr("id");
    $('#'+container ).stop(true, true).show();
},function(){
    var container = $(".show-element",this).attr("id");
    $('#'+container ).stop(true, true).fadeOut(200);
});