0

JQueryの基本を学んでいます。何かを学ぶとき、私は常に舞台裏でどのように機能するかを想像しようとしますが、いくつかの効果が実際にどのように行われるかは想像しません.

たとえば、単純な .hide(slow) がその例です。私が理解しているように、JQuery は HTML コンポーネントの HTML コードを変更します。アニメーションのない「.hide」はかなり「明白」に見えますが、「visibility:none」でうまくいくと思います。

しかし、アニメーションはもっと興味深いものを暗示していると思います。最初のアイデアは、属性を変更するループであり、レンダリングがスムーズなアニメーションを作成するのに十分な速さであることを期待しています。しかし、それはかなり「CPUの乱用」に聞こえます。

それは実際にどのように行われますか？

編集: 私は平均的な JS プログラマーでさえ考えていないので、元のソース コードを読むのは非常に困難です。「全体像」の説明を探していました。たぶん、その言葉は本当に流用されていませんでした。

4

3 に答える 3

3

jQueryのソースコードは少し高レベルなので簡単に理解できないため、単純なアニメーションを最初から作成する方が簡単な場合があります。

var element = document.getElementById('element');
var maximum = 200;
var interval = 5;
var left = 10;

function animate() {
    if (left < maximum) {
        left += 1 - Math.pow(left / maximum, 5);
        element.style.left = left + 'px';

        setTimeout(animate, interval);
    }
}

animate();​

そして、実用的なデモ：http: //jsfiddle.net/QB8C7/3/。

jQueryは似たようなことをしますが、はるかに構造化された方法で行います。

于 2012-08-18T04:10:29.803 に答える
2

http://james.padolsey.com/jquery/#v=1.7.2&fn=jQuery.fn.hide

いこうぜ。そのサイトは、jQuery 関数のボンネットの下にあるものを見るのに最適です。

あなたの質問を編集した後、私の返信を編集します--

映画について考えてみてください。ハリー・ポッターと、俳優を消滅させなければならないシーンを考えてみましょう。彼らはどのようにそれをしますか？透明度が 100% になるまで、単位時間ごとにアクターの透明度を上げる必要があります。hide(slow) の場合、約 1000 ミリ秒としましょう (わざわざ調べていません)。したがって、オブジェクトの透明度は 1 秒で 0% から 100% になる必要があります。そのため、その効果を得るには、100 分の 1 秒ごとに透明度を 1% 下げる必要があります。これは、平均的な Pentium 133 (私はまだ高校時代のコンピューターを持っています。それがどのように応答するかを確認するための良いテストになるでしょう) ではかなり CPU を集中的に使用しますが、最新のプロセッサではありません。ただし、ページが jQuery アニメーションで埋め尽くされている場合は、速度が低下していることに気付き始めます。

于 2012-08-18T03:56:37.240 に答える
1

jQuery サイトでソース コードを見つけて、舞台裏でどのように行われているか を正確に確認できます。

編集: 読みやすくするために、GitHub リポジトリを確認してください。

于 2012-08-18T03:53:45.563 に答える