Question

    /* Sliding Gallery panels */
$(function() {
$(".down_link").click(function() {
    var file = $(this).attr('data-file');
$(".load_space").load(file, function() {
    //Insert contents of file wherever
    $(".gallery_block2").stop(true, true).animate({ marginTop: 0 }, 400).fadeTo(500,1).show();
});
});    
$(".up_link").click(function() {
    $(".gallery_block2").stop(true, true).fadeTo(500,0).show().animate({ marginTop: -550 }, 400);
});
});

The above code animates a DIV (“gallery_block2”) into view when a thumbnail (“down_link”) is clicked. The DIV calls and loads a file. It can then be dismissed (“up_link”) and animates back out. This part works perfectly.

I’ve added a fade in/fade out part to animation as well to make it more slick. However, when it first slides in the file content is already loaded – it doesn’t fade in. When it’s dismissed, it fades out and then the next time it fades in perfectly. So it is just the first occasion that it doesn’t fade properly.

Any suggestions as to how to solve this?

Answer 1

It needs to be initially hidden style="display:none" in order for fade in to work properly. You could add a hide() call before you start the animation.