web-dev-qa-db-fra.com

Animation d'opacité jQuery

Je crée un site Web et il permet aux utilisateurs de modifier les options d'affichage. J'utilise jQuery pour lisser les animations pour le changement de police. Il efface toute la page et la réintègre avec les nouvelles polices.

L'animation de fondu est correcte, mais lorsqu'elle revient, il n'y a pas de fondu. Il apparaît simplement, pas d'animation.

La jQuery problématique est dans http://xsznix.my3gb.com/options.php .

Le code que j'ai jusqu'à présent est le suivant:

$('#font-classic').click(function(){
    $(document.body).animate({opacity: '0%'},{duration: 1000, complete: function(){
        // font changing code here
        $(document.body).animate({opacity: '100%'}, 1000);
    }});
});
javascriptjqueryjquery-animateopacity
23
xsznix

Pourquoi ne pas utiliser les fonctions intégrées de jQueryfadeIn et fadeOut ?

$('#font-classic').click(function(){
    $('body').fadeOut('normal', function(){
        $('body').fadeIn();
    }});
});
7
Jacob Relkin

la .animate() de jQuery prend des valeurs de 0 à 1.

$(document.body).animate({opacity: 0}, 1000);
$(document.body).animate({opacity: 1}, 1000);

Je suis sûr que .animate() doit appeler .parseFloat() (ou quelque chose) sur les valeurs que vous passez, ce qui ferait de votre 0% En 0 (ce qui est correct), mais votre 100% dans 100, ce qui serait incorrect.

56
user113716

Vous pouvez utiliser des fonctions ou quelque chose comme ceci:

$(document.body).animate({ opacity: 1/2 }, 1000);
8
user3109008