Oggi mentre lavoravo a un progetto mi sono imbattuto in un problema riguardante la compatibilità tra le transizioni CSS3 e la funzione jQuery FadeIn/FadeOut.

Sostanzialmente non riuscivo a far apparire con l’effetto FadeIn, un bottone dopo tot secondi (utilizzando la funzione SetTimoeout spiegata nel mio precedente articolo).
Pare che, se nel proprio codice sia presente un elemento con delle proprietà di transizione, applicandogli un effetto FadeIn, l’elemento appaia istantaneamente, ignorando completamente l’effetto FadeIn.

Ecco un piccolo esempio. Questo è il codice CSS che useremo:

[code lang=”css”]
image {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: block;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
image:hover {
opacity: .5;
[/code]

E questo invece è il codice jQuery:

[code lang=”js”]
$(document).ready(function() {
var images = $(‘img’);

images.hide();

images.each(function(i) {
$(this).delay(i * 50).fadeIn(500);
});
});
[/code]

Cosa succede in questa situazione? L’immagine appare, ma senza l’effetto di FadeIn tanto agognato. Dopo aver speso un po di tempo su questa problema, ho scoperto che rimuovendo la proprietà di transizione dalla regola CSS e applicandola dinamicamente dopo il FadeIn con jQuery, il tutto si risolve.

Ecco allora come muoversi:

[code lang=”css”]
image {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: block;
}
image:hover {
opacity: .5
}[/code]

E il nostro codice jQuery:

[code lang=”js”]
$(document).ready(function() {
var images = $(‘img’);

images.hide();

images.each(function(i) {
$(this).delay(i * 50).fadeIn(500, function() {
$(this).css({
‘-webkit-transition’: ‘all 1s ease-in-out’,
‘-moz-transition’: ‘all 1s ease-in-out’,
‘-o-transition’: ‘all 1s ease-in-out’,
‘transition’: ‘all 1s ease-in-out’,
});
});
});[/code]

Sfortunatamente non sono del tutto sicuro perchè accada tutto ciò. Ho controllato il codice, cercando di trovare, invano, il motivo di questo conflitto. Se qualcuno si è già imbattuto in questo problema trovando la spiegazione del problema, me lo faccia sapere nei commenti qua sotto!

16 consigli per aumentare il traffico e le visite al tuo Sito Web

LASCIA UN COMMENTO