1

私はまだ jQuery の初期学習段階にあることを覚えておいてください。

以下のコードでアニメーションのパフォーマンスに問題があります。jsfiddle ではパフォーマンスの問題は表示されませんが、Web サイトでは .js ファイルを作成していますが、html ファイルは巨大です!

コードの目的は、テキストエリアの高さをフォーカスでアニメーション化し、ボックスを元の高さにぼかすことです。

機能を組み合わせるとパフォーマンスが向上するのではないかと思っていましたが、逆のことが起こりました。 

$("#productsServiceDescription, #targetAudienceDescription").focus(function() {

    $(this).animate({
        height: 100
    }, "normal"),

    $(this).blur(function() {
        $(this).animate({
            height: 51
        }, "normal")
    });
});​

コードはこちら

http://jsfiddle.net/clearpixelsolutions/Yn477/

関数が分離されたコードは次のとおりです。アニメーションではパフォーマンスはまあまあですが、上記のように組み合わせるとひどいものになります。

$("#productsServiceDescription, #targetAudienceDescription").focus(function() {

    $(this).animate({
        height: 100
    }, "normal"),
});
$("#productsServiceDescription, #targetAudienceDescription").blur(function() {

    $(this).animate({
        height: 51
    }, "normal")
});​

機能を組み合わせて、id タグの再生成をなくしたいと考えていました。この関数を使用して、合計 15 個ほどの ID を取得します。

誰かが私が間違っていることとコードを最適化する方法を教えてくれることを願っています。

4

2 に答える 2

1
于 2012-08-18T07:45:14.667 に答える
0

http://jquerypp.com/をご覧になりましたか? この jQuery プラグインは、サポートされているブラウザーで CSS3 をサポートするために、jQuery のアニメーション機能を拡張します。jQueryを埋め込んだ後の行だけにスクリプトを埋め込むだけで、スムーズなアニメーションを表示してリラックスできます:)

于 2012-08-18T08:07:59.763 に答える