J'ai une image que j'aimerais fondre.jQuery fondu va beaucoup plus vite que fondu?
$("#img").animate({
opacity: 0
}, 1000);
$("#img").animate({
opacity: 100
}, 1000);
Même si la minuterie est réglée sur 1000 millisecondes pour les deux, l'effacement se produit beaucoup plus rapidement. Pourquoi cela se produit-il?
démonstration en direct: http://jsfiddle.net/G3KtZ/
Pour votre « fade in » animer la fonction, vous réglez l'opacité à 100. Il doit simplement être mis à 1. Opacité en CSS est de 0 à 1, et par conséquent son du même en JavaScript (puisque vous utilisez Javascript pour modifier le CSS).
Alors, voici ce qui se passe. jQuery anime l'opacité de 0 à 100 sur 1000ms. Mais dès que l'opacité frappe 1 (après seulement 10ms), l'opacité est pleine.
Voir ici: http://jsfiddle.net/G3KtZ/3/
Je ne peux pas croire que j'ai fait une telle erreur stupide ... merci. – Nick
Opacité est mesurée entre 0 et 1, changer la deuxième partie de votre code:
$("#img").animate({
opacity: 1
}, 1000);
Et le problème est résolu
Définissez l'opacité sur 1 au lieu de 100. Des valeurs supérieures à 1 s'appliquent aux feuilles de style CSS, mais elles n'ont aucun sens. L'opacité totale est 1, invisible signifie 0.
L'opacité prend des valeurs comprises entre 0 et 1, et non entre 0 et 100. Cela entraîne une valeur maximale (1) à 1% de l'animation de fondu entrant.
Il est
$("#img").animate({
opacity: 1
}, 1000);
pas 100.
Vous pouvez également utiliser fadeIn() et fadeOut() méthode:.
$("#img").fadeOut(1000).fadeIn(1000);
$ ("# img") fadeToggle (» slow "); –
@Learner - ce que vous proposez N'EST PAS équivalent à ce que l'utilisateur essaie de faire parce que toutes les différentes méthodes de "fondu" de jQuery définissent "display: none" à la fin plutôt que de simplement affecter l'opacité. – maxedison