这是小提琴: http://jsfiddle.net/Ywq8G/
我想知道是否有人能够告诉我:为什么menu1在点击子菜单(绿色)后闪烁,其他两个工作正常,但调试让我无处可去,我就像:SO给了我这么多答案已经准备好(只需阅读)我可以贡献并提出我的具体问题。
我希望这个解决方案能让我成为更好的开发人员并帮助其他人避免遇到的问题。
var MENU_HEIGHT = 110;
$(document).ready(function () {
var menuCollection = {}
var i = 1;
$(".menu").children().each(function () {
menuCollection[i] = [];
$(".subMenu" + i).children().each(function () {
menuCollection[i].push(this);
});
i++;
});
function scroll(menu, item, status) {
if (item < menu.length) {
var currentChild = menu[item];
if (status == "scrollOut") {
$(currentChild).stop().animate({
top: MENU_HEIGHT + 80 * item
}, {
queue: false,
duration: 600
}) {
scroll(menu, item + 1, status);
};
} else {
$(currentChild).stop().animate({
top: 0
}, {
queue: false,
duration: 600
}) {
scroll(menu, item + 1, status);
};
}
}
}
var ii = 1;
$(".menu").children().each(function () {
var target = $(this).attr('class');
var menu = menuCollection[ii];
$("." + target + ", .subMenu" + ii + " > a").bind("mouseover", function () {
doScroll(menu, 0, "scrollOut");
});
$("." + target + ", .subMenu" + ii + " > a").bind("mouseout", function () {
doScroll(menu, 0, "scrollIn");
});
ii++;
});
function doScroll(menu, item, status) {
scroll(menu, item, status);
}
$("a").click(function (event) {
var href = $(this).attr('href');
href = href.substring(1);
$(".current").appendTo(".hidden");
$(".current").removeClass("current");
$("." + href).addClass("current");
$("." + href).appendTo(".main");
$('html, body').animate({
scrollTop: $(".main").offset().top
}, 600);
});
});
答案 0 :(得分:0)
闪烁是因为您使用带有'#'的标签的href参数,当您点击它时,浏览器会将窗口移动到ID为#-value的元素。如果你有很多内容要改变浏览器,首先跳转到这个id然后使用你的$('html,body')。animate({...})函数(所以再次跳到顶部并动画到down)。
您可以将'href'更改为'myHref'(在html和js中)它应该解决问题。
(对不起我的英语,我希望可以理解)