Question

我正在尝试使用jQuery进行 true 滑动（因此元素实际上滑了），我想出了以下内容，我不确定它是否已经过优化，你能看到一种方式改善它？

这个想法是.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比使用其他功能更短，更快。如果你愿意，请保留它，但我在我的代码中放弃它。

jQuery更简单的方法来做真正的幻灯片/向下

1 个答案: