Question

I have made a JSFiddle (http://jsfiddle.net/wpC57/2) that showcases my problem.

I want the #grid-viewer to have display: none; as the page loads. Then when you hover over any of the links I want it to fadeIn and reposition accordingly.

The repositioning is working as intended now but I’m having problems with fading it in and out. It wont fade in again after it has faded out. Any help would be appreciated.

The JavaScript that handles the hovering functions looks like this;

$("a.mainlink").hover(function() {
    var dataTitle = $(this).attr("data-title");
    $("#grid-viewer").stop().fadeIn();
    $("#grid-viewer").stop().animate({
        "left": ($(this).offset().left - $("#grid-view").position().left)
    }, 200);
    $("#grid-text").html(dataTitle);
}, function() {
    $("#grid-viewer").stop().fadeOut();
});

Answer 1

You maek it visible with: $("#grid-viewer").stop().fadeIn(); but the imediatly stop the fadeIn with $("#grid-viewer").stop().animate({ therefor the opatcity stays 0 and it is hidden.
Try includeing the fade infunctionality into your animation with like this:

$("#grid-viewer").stop().animate({
            "display" : "block",
            "opacity": 1,
            "left": ($(this).offset().left - $("#grid-view").position().left)
        }, 200);

Full sample: http://jsfiddle.net/wpC57/7/

$(document).ready(function() {
    $("a.mainlink").hover(function() {
        var dataTitle = $(this).attr("data-title");
        $("#grid-viewer").show();
        $("#grid-viewer").stop().animate({
            "opacity": 1,
            "left": ($(this).offset().left - $("#grid-view").position().left)
        }, 200);
        $("#grid-text").html(dataTitle);
    }, function() {
        $("#grid-viewer").stop().fadeOut();
    });
});​