我正在尝试使用 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);
}
}
});
});
谢谢你的时间,