jQuery更简单的方法进行真实的上/下滑动

Question

我正在尝试使用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);
            }
        }
    });
});​

谢谢你的时间，

Answer 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比命中附加函数更短，更快。 如果愿意，可以保留它，但是我在代码中放弃了它。