web-dev-qa-db-ja.com

jQuery不透明度アニメーション

私はウェブサイトを作成していますが、ユーザーは表示オプションを変更できます。 jQueryを使用して、フォント変更のアニメーションを滑らかにします。新しいフォントを使用して、ページ全体をフェードアウトし、再びフェードインします。

フェードアウトアニメーションは問題ありませんが、フェードインすると、フェードは発生しません。それはポップアップするだけで、アニメーションはありません。

問題のあるjQueryは http://xsznix.my3gb.com/options.php にあります。

私がこれまでに持っているコードはこれです：

$('#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

なぜjQueryの組み込み関数 fadeIn および fadeOut を使用しないのですか？

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

jQueryの.animate()は、_0_から_1_の値を取ります。

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

.animate()は、渡す値に対して.parseFloat()（または何か）を呼び出す必要があります。これにより、_0%_が_0_になります正しい）が、_100%_を_100_に変換しますが、これは正しくありません。

56
user113716

関数または次のようなものを使用できます。

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