Question

I am trying to get a preview to display on hover, but if I move my mouse off, I want the preview not to display. Currently, if I quickly move my mouse across the “.searchRecord” element it will display after 300ms anyway, and be “stuck” as the mouse off function was called before the setTimeout function could finish. if I let me cursor stay on the element until the preview displays everything works just fine.

I set the variable outside the function as I read elsewhere, however, it doesn’t reset. I’m a bit stumped.

var timer;
$('.searchRecord').hover(function() {
    $(this).children('.previewLoad').show();
    var current = '#'+$(this).children('div').attr('id');

    //slight delay before hover so they can select what they want
    var timer = window.setTimeout(function(){
        $(current).fadeIn('fast');
        $(current).siblings('.previewLoad').hide();
    }, 300);
}, function() {
    window.clearTimeout(timer);
    var current = '#'+$(this).children('div').attr('id');
    previewTimeouter(current);
});

Answer 1

you have duplicated timer declaration. remove the var in var timer in the hover callback.

var timer;
$('.searchRecord').hover(function() {
    $(this).children('.previewLoad').show();
    var current = '#'+$(this).children('div').attr('id');

    //slight delay before hover so they can select what they want
    timer = window.setTimeout(function(){
        $(current).fadeIn('fast');
        $(current).siblings('.previewLoad').hide();
    }, 300);
}, function() {
    window.clearTimeout(timer);
    var current = '#'+$(this).children('div').attr('id');
    previewTimeouter(current);
});