.delegate img src = и исчезает

Question

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

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

Я бы хотел, чтобы изображение исчезало / появлялось при щелчке большого пальца и переключении img src.

Я пробовал

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

, но изображение src поменяется, прежде чем оно исчезнет.Есть ли способ связать это исчезновение-> 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

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

$('.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/