Getting images to fade out

JavaScript
1

I downloaded an image gallery and even managed to get the images to fade in nicely but they don’t fade out, they just dissapear. So, I thought I would post here in the hope that someone can help me out because this is way out of my depth.
The gallery was this one from codrops…
http://tympanus.net/codrops/2010/05/23/fresh-sliding-thumbnails-gallery-with-jquery-php/
This is the code which (I think) needs altered, but I have tried everything I could think of…

function loadPhoto($thumb,cursorClass){
current	 = $thumb.index()+1;
$('#imageWrapper').empty();
$('#loading').show();
$('<img id="displayed" title="'+$thumb.attr('title')+'" class="'+cursorClass+'" style="display:none;"/>').load(function(){
var $this = $(this);
$('#loading').hide();
resize($this,0);
if(!$('#imageWrapper').find('img').length){
$('#imageWrapper').append($this.fadeIn(4000));            $('#description').html($this.attr('title'));
}
}).attr('src',$thumb.attr('alt'));
}

Any pointers, or even wild guesses would be really appreciated. Thanks in advance

2

This is what’s responsible for that.

$('#imageWrapper').empty();

You could try something like this, where the image is faded out and the rest of the work is performed as a callback to the fade out method:


$('#imageWrapper img').fadeOut(500, function () {
    $('#imageWrapper').empty();
    ...
});
3

Thanks for your reply. I have managed to get a step closer and get the images to fade out. Problem is, they then don’t fade in :slight_smile:

4

What it should look like is something like this:


$('#imageWrapper img').fadeOut(500, function () {
    $('#imageWrapper').empty();
    $('#loading').show();
    $('<img id="displayed" title="'+$thumb.attr('title')+'" class="'+cursorClass+'" style="display:none;"/>').load(function(){
        var $this = $(this);
        $('#loading').hide();
        resize($this,0);
        if(!$('#imageWrapper').find('img').length){
            $('#imageWrapper').append($this.fadeIn(4000));
            $('#description').html($this.attr('title'));
        }
    }).attr('src',$thumb.attr('alt'));
});

The only difference between that code and the code you posted earlier, is that most of your code is contained inside of the fadeOut callback function.