Question

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.

Answer 1

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

});