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 回答