.delegate img src = и угасание

Question

У меня есть эта функция.

$('.anythingSlider').delegate('img','click', function(){ 
    $('#largeImage').attr('src',$(this).attr('data-image')); 
}); 

Я хотел бы иметь IMG исчезать/в, когда большой палец нажал и IMG SRC поменялись местами.

Я попытался

$('.anythingSlider').delegate('img','click', function(){ 
    $('#largeImage').animate({opacity:0}); 
    $('#largeImage').attr('src',$(this).attr('data-image')); 
    $('#largeImage').animate({opacity:1}); 
}); 

но изображение ГКЗ свопы перед ним гаснуть. Есть ли способ связать это исчезновение -> img src swap -> fade in? Любая помощь будет оценена по достоинству.

Спасибо, Майкл

Answer 1

Попробуйте

$('.anythingSlider').delegate('img','click', function(){ 
    $('#largeImage').fadeOut(500, function(){ 
    $(this).attr('src',$(this).attr('data-image')).fadeIn(500); 
    }); 

}); 

Answer 2

Вы должны использовать функцию обратного вызова/Out методов FadeIn.

$('.anythingSlider').delegate('img','click', function(){ 
    var newImg = $(this).data('image'); // the data- attributes can be accessed directly with the .data() method 
    $('#largeImage').fadeOut('normal', function(){ 
     $(this).attr('src',newImg); // set the src attribute to the new one 
    }); 
}); 

// set the fadeIn to happen on the .load event of the image so that it does not fade in while loading.. 
$('#largeImage').load(function(){ 
    $(this).fadeIn('normal'); 
}); 

Демо на http://jsfiddle.net/gaby/33P4F/