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