Question

I am currently displaying pictures when an tag is hover over. I have been able to workout the main problem of displaying the picture. The problem is that it has a glitch when hovering occurs quickly. Is there away to avoid that? Also how can i set a default image to display when page is loaded? JSFIDDLE

HTML

<div id="links">    
    <a href="example.htm" class="large magenta awesome" data-content="cheeseburger">Cheeseburger »</a>
    <a href="example.htm" class="large blue awesome" data-content="tacos">Tacos »</a>
    <a href="example.htm" class="large red awesome" data-content="salads">Salads »</a>
    <a href="example.htm" class="large orange awesome" data-content="bread-sticks">Bread Sticks »</a>
    <a href="example.htm" class="large yellow awesome" data-content="dessert">Dessert »</a>
</div>

Jquery

$("div#links > a").hover(
    function(){
        var ID = $(this).data("content");
        $("div#images").children("img#" + ID).fadeIn("slow");
    },
    function() {
        var ID = $(this).data("content");
        $("div#images").children("img#" + ID).hide();
    }
);​

Glitch

Answer 1

The problem is that it has a glitch when hovering occurs quickly. Is
there away to avoid that?

This is not a glitch. fadeIn is using animation. As you are hovering over the links faster than the animations complete your experiencing that “glitch”.

To ensure you are not clashing with the previous running animation you have to stop any current and any queued animation.

Replace

$("div#images").children("img#" + ID).fadeIn("slow");

with

$("div#images").children("img#" + ID).stop(true, true).fadeIn("slow");

DEMO – Clearing the animation queue before starting the next one

how can i set a default image to display when page is loaded?

I added the code to show a default image as well. To prevent any odd visuals when hovering over a menu item the first time when using a default image. The code checks if we are showing a default image and if we are it will further check if the image for the current menu is the default image.

If it is, it won’t hide it as it is showing it anyway but if it is not, it will ide the default image before fading in the new one.

Hope this makes sense, see the full code and DEMO below.

// Indicates if default image is shown
var showingDefaultImage = true;

var $images = $("div#images");
var $defaultImage = $images.children("img#tacos");

// Display a default image
$defaultImage.show();

$("div#links > a").hover(

function() {
    var ID = $(this).data("content");
    var $image = $images.children("img#" + ID);

    if (showingDefaultImage) {
        showingDefaultImage = false;
        if (!$image.is($defaultImage)) {
            $defaultImage.hide();
        }
    }

    $image.stop(true, true).fadeIn("slow");
}, function() {
    $images.children().hide();
});​

DEMO – Showing a default image

The code in the above DEMO is also a little more optimized by caching the selectors.

would it be possible to leave up the most recent image from the last
hovered tag ?(instead of hiding the image and leaving a blank)

If I understood you correctly you don’t want to hide the image when you leave menu with your mouse but instead want to leave the image of the menu you last hovered over visible.

To do that you remove the second function of the hover and as it is no longer needed you can now attach the mouseenter event instead.

var $images = $("div#images");
var $currentImage = $images.children("img#tacos");

$currentImage .show();

$("div#links > a").mouseenter(function() {
    var ID = $(this).data("content");
    var $image = $images.children("img#" + ID);

    if (!$image.is($currentImage)) {
        $currentImage.hide();
    }

    $currentImage = $image;
    $image.stop(true, true).fadeIn("slow");
});

DEMO – Fading in images on mouseenter and leaving last image visible

The above code includes caching of selectors for optimisation and the logic to ensure no “flickering” occurs when the new hovered menu item is the same as the last one which was hovered.