fade in/out con ancoraggio

[claudia_c82]

Buongiorno a tutti,
premetto che non sono molto esperta nel jquery.....
ho preso uno script che mi fa una gallery, tutto perfetto, come mi serve.....
l'unico problemino è nel cambio d'immagine.... ho aggiunto io il fade in/out e ogni volta che cambia immagine mi torna al top come se fosse ancorato.

questo è il codice originale

$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');

e questo è quello modificato da me

$rgGallery.find('div.rg-image').fadeOut(500, function() { //Fade-Out
                            $rgGallery.find('div.rg-image').empty( ).append('<img src="' + largesrc + '"/>') //Image change
                            }).fadeIn(500); //Fade-In

il div.rg-image è il div contenitore, ed è li che mi fa l'ancoraggio, me nel codice originale al cambio d'immagine non torna su......

ma dove sbaglio

grazie a tutti

[cavicchiandrea]

Senza conoscere $rgGallery difficile dire il perché di questa anomalia, io le modifiche le faccio solo se conosco benissimo lo script/plugin da modificare altrimenti mi astengo, tu che non conosci bene jquery lasca come è in origine

[claudia_c82]

bèh, ma così non imparo mai..... non tutti gli script sono scritti per me..... e a me serve che al cambio d'immagine faccia il fade in/out

[cronenborg]

questo è il codice originale

$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');

Ciao,
come vedi nel codice originale che hai postato c'è solo la parte di APPEND dell'immagine, ovvero la creazione dei tag di visualizzazione dell'immagine.
Invece tu nello script che hai modificato hai inserito anche il fadeout che dovrebbe stare nella parte che "toglie" i tag dell'immagine.
Quindi secondo me devi solo inserire il fadeIn in questo codice e mettere il fadeOut nel codice dove rgGallery rimuove l'immagine.

[claudia_c82]

ma non è la funzione empty() che toglie l'immagine precedente?!
ho provato

$rgGallery.find('div.rg-image').fadeOut(500, function() { //Fade-Out
       $rgGallery.find('div.rg-image').empty( ).fadeIn(500).append('<img src="' + largesrc + '"/>') //Image change
}); //Fade-In

e anche così

$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>').fadeOut(500).fadeIn(500);

ma senza risultato

[cronenborg]

Stai facendo un fadeIn di un div ancora vuoto...

La sequenza giusta è:
- trova il div.rg-image
- effettua il fadeOut su di esso e in callback:
- svuotalo
- appendigli la nuova immagine
- effettua il fadeIn.
Tradotto in jquery:

$rgGallery.find('div.rg-image').fadeOut(500,function(){
    //callback
    $rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>').fadeIn(500);
});

[claudia_c82]

anche così mi rimanda all'ancoraggio.....

però ho trovato un'alternativa

$rgGallery.find('div.rg-image').fadeTo(500, 0,function(){
      $rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>').fadeTo(500, 1);
      });

forse non sarà proprio correttissimo ma almeno funziona

in pratica ho sostituito il fadeOut e fadeIn (che in pratica era quello che mi faceva più confusione)
con fadeTo

Grazie ugualmente dell'aiuto