Question

I have several boxes in close proximity which show a different box when any of the boxes are hovered over, here is a code snippet (incomplete, so no fiddle):

<div id="big_square_1" class="big_square" style="display:none;"></div>
<div id="big_square_2" class="big_square" style="display:none;"></div>
<div id="big_square_3" class="big_square" style="display:none;"></div>
<div id="big_square_4" class="big_square" style="display:none;"></div>

and the jQuery:

    $("#big_square_1").mouseenter(function() {
        $('#big_square_1').css("border", "1px solid #191919").css("height", "98px").css("width","98px");
        $('#hover_Box').fadeIn('fast');
    });
    $("#big_square_1").mouseleave(function() {
        $('#big_square_1').css("border", "inherit").css("height", "100px").css("width", "100px");
        $('#hover_Box').fadeOut('fast');
    });
    $("#big_square_2").mouseenter(function() {
        $('#big_square_2').css("border", "1px solid #191919").css("height", "98px").css("width","98px");
        $('#hover_Box').fadeIn('fast');
        $('#side_box_1').append('<br><br><br><p>This is ARC</p>');
    });
    $("#big_square_2").mouseleave(function() {
        $('#big_square_2').css("border", "inherit").css("height", "100px").css("width", "100px");
        $('#hover_Box').fadeOut('fast');
    });

I have configured these events separately, so that I may add content with .html to the boxes later on. However, for now, when these boxes are rolled over quickly, ‘fast’ simply isn’t fast enough and the box they fade in ends up blinking. How can I modify my mouseenter/mouseleave to prevent this blink? (I am a .stop/.bind novice). Also, I know I can use shorthand for multiple CSS changes, I just prefer to do it this way until I get the hover issues settled.

Answer 1

Try placing .stop(true,true) before your fadeIn and fadeOuts.