I am currently creating a site with some dynamic content, so that whenever a user hovers over a label, the label expands to show more information, then after a specific time the label will collapse again, unless the user hovers over the label again in which case the Timeout will reset. I have developed the code to do this for 1 label, but I would to develop it now to do it for multiple labels.

The problem I'm having though is that I am defining the variable for the timer globally so it can be used for both events, this won't work when I have multiple labels though.

I can't think how I can achieve this for multiple labels, does anyone have any idea how I can do this?

Here is my code so far...

    var timer;


    $('.label').mouseenter(function(){

        clearTimeout(timer);

        $('#' + this.id + ' div').slideDown('slow');

    });


    $('.label').mouseleave(function(){

        var temp = $('#' + this.id + ' div');

        timer = setTimeout(function() { 
            temp.stop().slideUp('slow');
        }, 2000);

    }); 

Thanks in advance for any help.

I am currently creating a site with some dynamic content, so that whenever a user hovers over a label, the label expands to show more information, then after a specific time the label will collapse again, unless the user hovers over the label again in which case the Timeout will reset. I have developed the code to do this for 1 label, but I would to develop it now to do it for multiple labels.

The problem I'm having though is that I am defining the variable for the timer globally so it can be used for both events, this won't work when I have multiple labels though.

I can't think how I can achieve this for multiple labels, does anyone have any idea how I can do this?

Here is my code so far...

    var timer;


    $('.label').mouseenter(function(){

        clearTimeout(timer);

        $('#' + this.id + ' div').slideDown('slow');

    });


    $('.label').mouseleave(function(){

        var temp = $('#' + this.id + ' div');

        timer = setTimeout(function() { 
            temp.stop().slideUp('slow');
        }, 2000);

    }); 

Thanks in advance for any help.

• javascript
• jquery
• timeout

3 Answers 3

You can maintain an array of timers like

var timer = [];


$('.label').mouseenter(function(){

    clearTimeout(timer[$(this).index()]);

    $('#' + this.id + ' div').slideDown('slow');

});


$('.label').mouseleave(function(){

    var temp = $('#' + this.id + ' div');

    timer[$(this).index()] = setTimeout(function() { 
        temp.stop().slideUp('slow');
    }, 2000);

}); 

You can also achieve this with a more clear syntax using .hover like

var timer = [];

$('.label').hover(function(){

    clearTimeout(timer[$(this).index()]);

    $('#' + this.id + ' div').slideDown('slow');

},function(){
    var temp = $('#' + this.id + ' div');

    timer[$(this).index()] = setTimeout(function() { 
        temp.stop().slideUp('slow');
    }, 2000);

});

Why dont you use hover :

$('.label').hover(function(){
  $('#' + this.id + ' div').slideDown('slow');
},
function(){
  $('#' + this.id + ' div').slideUp('slow');
})

This way, when labels are hovered upon, more info will show and when mouse leaves them, they will hide back again.

The first param to hover is for mouse enter while second for mouse leave.

More Info:

http://api.jquery./hover/

Instead of using global variable timer you can use jQuery's .data() method like this:

$('.label').hover(function(){
    clearTimeout($(this).data('hover_timeout'));
    $('#' + this.id + ' div').slideDown('slow');
},function(){
    var temp = $('#' + this.id + ' div');
    $(this).data('hover_timeout', setTimeout(function() { 
        temp.stop().slideUp('slow');
    }, 2000));
});

jQuery.data() documentation