JavaScript/jQuery hover functions behaves funny - array issue?

Question

So I have this code:

HTML

<p id="lorem">
    <span class="red" id="n01">L</span>
    <span class="red" id="n02">o</span>
    <span id="n03">r</span>
    <span id="n04">e</span>
    <span class="blue" id="n05">m</span> 
    <span id="n06">i</span>
    <span class="blue" id="n07">p</span>
    <span class="red" id="n08">s</span>
    <span id="n09">u</span>
    <span class="blue" id="n10">m</span>
</p>

<br />

<div id="bar-red"></div>
<div id="bar-blue"></div>

JS

function legend( elem ) {
    var timer;
    var k;
    var h = $( elem );

    if( elem == ".red" ) {
        k = $("#bar-red");
    }

    if( elem == ".blue" ) {
        k = $("#bar-blue");
    }

    h.hover(function() {
        console.log(h);
        if(timer) {
            clearTimeout(timer);
            timer = null
        }

        timer = setTimeout(function(){
            k.animate({width: "30px"}, 200);
        }, 300)
    },
    function(){
            k.animate({width: "10px"}, 200);
    });
}


legend(".blue");
legend(".red");

To understand the problem a bit better I have also created a Fiddle. When you hover over a blue letter and let the mouse rest there for a short amount of time, the blue bar expands. Same thing for red letters and the red bar. The problem is, sometimes is lags, the bar stays expanded or won't really expand. Why is it like this?

In my production environment I have about 150 letters and the hover is basically unusable. Or could this be because I add the classes dynamically (not in Fiddle)?

Also, while debugging with Firebug, I noticed something strange. I hover over one element and log h, it shows all elements with the class. That's why I think I maybe have some kind of logic error in this function. Maybe it fires multiple times at once and that's why it lags?

Any held is appreciated!

did you used timeouts for preventing animation conflicts because of consecutively and rapid mouseovers? — Barlas Apaydin
– Barlas Apaydin, Commented Jul 18, 2012 at 9:27
Yes. The mouse has to rest on one point for a short amount of time before the bar expands. — Sven
– Sven, Commented Jul 18, 2012 at 9:35
if you check my answer, i find the stop() first, 25 min ago ;) stackoverflow.com/posts/11538065/revisions — Barlas Apaydin
– Barlas Apaydin, Commented Jul 18, 2012 at 9:42

Barlas Apaydin · Accepted Answer · 2012-07-18 09:36:30Z

2

You dont need to use timer to prevent mouse over animate conflicts, stop() method will be just fine. Also you can try stop(true,false) / stop(false,true) to find your problem's best solution.

If you insist with using timer, check my answer's edit versions. Last one i did it with timer.

Here is jsfiddle.

h.bind({
  mouseenter: function() {
     k.stop().animate({width: "30px"}, 200);
  },
  mouseleave:    function(){
     k.stop().animate({width: "10px"}, 200);
  }
});

edited Jul 18, 2012 at 9:36

answered Jul 18, 2012 at 9:16

Barlas Apaydin

7,35511 gold badges60 silver badges88 bronze badges

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

2 Comments

Sven Over a year ago

Thank you so much, the funny behavior is gone now! Do you know any particular reason why bind is better than hover? I thought hover was made for stuff like this.

Barlas Apaydin Over a year ago

yes, bind is well-organized and much more expendable. You can use most f events/trigger methods with bind like 'dblclick', 'submit', 'myCustomEvent', 'mouseenter mouseleave'.

matt · Accepted Answer · 2012-07-18 09:23:42Z

1

Try this code,

 function legend( elem ) {
    var timer;
    var k;
    var h = $( elem );

    if( elem == ".red" ) {
        k = $("#bar-red");
    }

    if( elem == ".blue" ) {
        k = $("#bar-blue");
    }

    h.hover(function() {
        /*console.log(h);
        if(timer) {
            clearTimeout(timer);
            timer = null
        }*/
        k.stop().animate({width: "30px"}, 200);
       /* timer = setTimeout(function(){
            k.animate({width: "30px"}, 200);
        }, 300)*/
    },
    function(){
            k.stop().animate({width: "10px"}, 200);
    });
}


legend(".blue");
legend(".red");

edited Jul 18, 2012 at 9:23

answered Jul 18, 2012 at 9:15

matt

1,9731 gold badge20 silver badges42 bronze badges

1 Comment

Sven Over a year ago

You actually commented out the code that makes the effect occur with a slight delay (the mouse has to rest a bit on one spot before the effect starts).

Collectives™ on Stack Overflow

JavaScript/jQuery hover functions behaves funny - array issue?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related