1

私はjQueryで真のスライドを実行しようとしています（要素が実際に上にスライドするように）、次のことを思いつきました、それが非常に最適化されているかどうかはわかりませんが、それを改善する方法を見つけることができますか？

フィドル：http：//jsfiddle.net/gpuHG/1/

アイデアは、.content要素がデフォルトで高さだけ上がっているため、ページから外れるか、ヘッダーの後ろにあります。メニューの項目をクリックすると、ウィンドウが開いている場合は閉じて、要求された項目が下にスライドします。私の解決策は、とても単純なもののためにかなり肥大化しているようです！

jQuery：

$.fn.exists = function() {
    return this.length !== 0;
}

$(".content").each(function() {
    $(this).hide().css({
        "margin-top": "-=" + $(this).outerHeight() + "px"
    });
});

$("#navigation ul li").each(function() {
    var relatedContent = $("#" + $(this).attr("title") + "-content");
    $(this).click(function() {
        if (!$(":animated").exists()) {
            if ($(".open").exists()) {
                $(".current").first().removeClass("current");
                $(this).addClass("current");
                var element = $(".open").first();
                element.removeClass("open").animate({
                    "margin-top": "-" + element.outerHeight() + "px"
                }, 500, function() {
                    $(this).hide();
                    relatedContent.show().addClass("open").animate({
                        "margin-top": "0px"
                    }, 500);
                });
            } else {
                $(this).addClass("current");
                relatedContent.show().addClass("open").animate({
                    "margin-top": "0px"
                }, 500);
            }
        }
    });
});​

御時間ありがとうございます、

4

1 に答える 1

1

全体として、あなたのコードは問題ないので、あまり変更しませんでした。可能な限り変数をキャッシュすることを忘れないでください。DOM アクセスは高価です。また、セレクターにコンテキストを提供すると、パフォーマンスが向上します。これには他にも多くの調整を加えることができますが、いくつかを以下に示します。

var $nav = $('#navigation');
$nav.find("ul li").click(function(){
    if($(':animated').length) { return; }
    var $this = $(this),
        relatedContent = $("#"+$this.attr("title")+"-content", $nav);
    if(!relatedContent.length) { return; }
    if($(".open", $nav).length) {
        $(".current", $nav).removeClass("current");
        $this.addClass("current");
        var element = $(".open", $nav).first();
        element.removeClass("open").animate({"margin-top": "-"+element.outerHeight()+"px"},
            500,
            function() {
                $(this).hide();
                relatedContent.show().addClass("open").animate({"margin-top": "0px"},500);
            });
    } else {
        $this.addClass("current");
        relatedContent.show().addClass("open").animate({"margin-top": "0px"},500); 
    }
});​

編集: 上記のコメントに同意します:あなたの$.fn.exists関数は利便性に優れていますが.length、追加の関数を使用するよりも短くて高速です。必要に応じてそのままにしておいてください。ただし、コードでは捨てています。

于 2012-06-05T23:09:16.720 に答える