fonction de rappel jQuery ne fonctionne pas

Question

Je suis en train d'utiliser le code suivant pour faire une fadeOut d'image et, seulement quand il est fané dehors, changer sa source, puis faire FADEIN à nouveau:

$('.liitem').click(function() { 
$('#imagen').fadeOut('slow', function() { 
    var rutaimagen = $(this).find('a').attr("href"); 
    $('#imagen').attr("src",rutaimagen).load(function(){  
    $('#imagen').fadeIn('slow'); 
    }); 
}); 
return false; 
}); 

... mais ça ne marche pas !! J'ai essayé de supprimer la fonction de rappel dans fadeOut, et cela fonctionne, mais vous pouvez voir la nouvelle image remplacer brusquement la précédente (parce qu'elle se charge avant que l'effet fadeOut soit fini), puis disparaître, puis à nouveau :

$('.liitem').click(function() { 
$('#imagen').fadeOut('slow'); 
    var rutaimagen = $(this).find('a').attr("href"); 
    $('#imagen').attr("src",rutaimagen).load(function(){  
    $('#imagen').fadeIn('slow'); 
    }); 
return false; 
}); 

De toute évidence, je préfère une version de travail du premier extrait.

Vous pouvez voir que je suis en utilisant une fonction qui déclenche l'effet fadeIn ne lorsque la nouvelle image est chargée, ce qui est logique dans le cas où la nouvelle image est très grand et a besoin de plus de temps. Cela ne me dérange pas si elle reste blanche pendant le chargement, je peux implémenter un chargeur .gif pour cela. Mais je ne sais pas si cela .load (function() {}); interfère toute la chose.

Answer 1

Une chose que je remarque que est différent entre vos deux exemples:

$(this).find('a').attr("href"); 

Dans la première, « ce » est #imagen, dans le second « ce » est .liitem. Est-ce que cela a quelque chose à voir avec ça?

Answer 2

Merci à darkporter. Ceci est mon code maintenant et cela fonctionne:

$('.liitem').click(function() { 
    var liitem = $(this); 
$('#imagen').fadeOut('slow', function() { 
    var rutaimagen = liitem.find('a').attr("href"); 
    $('#imagen').attr("src",rutaimagen).load(function(){ 
    $('#imagen').fadeIn('slow'); 
    }); 
}); 
return false; 
});