jquery show and hide buggy with hover, better coding?

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?

I suggest using `data-idt` instead of a `idt` attribute. They can be accessed using `.attr('data-idt')` or `.data('idt')`. You also shouldn't have IDs that start with a number. — Rocket Hazmat, Dec 29 '11 at 19:49

score 2 · Accepted Answer · answered Dec 29 '11 at 19:36

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

score 2 · Answer 2 · answered Dec 29 '11 at 19:44

The problem here, is that you have multiple elements with the same ID. You can't do that (you also can't have IDs that start with a number). You also have multiple .show-element divs inside Item (.attr only gets the info from the 1st one).

You should use classes, or unique IDs to find the elements you want to show/hide, and you should make your hover event more specific. Like this:

HTML

<div class='Item'>
    <div class='show-element' id='show_1'>Show</div>
    <div id="info_1">some stuff</div>

    <div class='show-element' id='show_2'>Show</div>
    <div id="info_2">some stuff</div>
</div>

JavaScript

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

DEMO: http://jsfiddle.net/CNy22/

score 1 · Answer 3 · edited May 23 '17 at 11:55

1

Maybe that happens because you are generating invalid Html code, AFAIK (correct me) ids cannot start with a number, see What are valid values for the id attribute in HTML?

edited May 23 '17 at 11:55

Community

1
1

answered Dec 29 '11 at 19:34

David Mauricio

1,121
1
16
34

score 1 · Answer 4 · answered Dec 29 '11 at 19:35

You are using the same ID's more than once, which will definitely cause problems.

You can try something more like:

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

html:

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

Doesn't neccessarily have to be 'alt', it just shouldn't be ID if you are using the same one elsewhere. Also, it may work, but you should have a class or ID starting with a number.

Don't misuse attributes to store arbitrary data. I suggest using `name`, or better use a `data-` attribute (`
Show
`). `data-` attributes can be accessed using `.attr('data-idnum')` or `.data('idnum')`. — Rocket Hazmat, Dec 29 '11 at 19:46

Brandon Boone · Answer 5 · 2011-12-29T19:50:26.773

0

Is this any better? http://jsfiddle.net/BBtJ6/1/

edited Dec 29 '11 at 19:50

answered Dec 29 '11 at 19:38

Brandon Boone

15,271
4
69
93

1

you cannot use same id's more than once – Kishore Dec 29 '11 at 19:41
Passing 2 functions to [`.hover`](http://api.jquery.com/hover/) is *exactly the same* as binding to `mouseenter` and `mouseleave`. It's shorthand. – Rocket Hazmat Dec 29 '11 at 19:50
Modified to account for "ids". Wasn't sure if hover's underlying methods were mouseover/mouseout or mouseenter/mouseleave thus the explicit declaration. – Brandon Boone Dec 29 '11 at 19:53

jquery show and hide buggy with hover, better coding?

5 Answers5