jQuery -改变宽度使页面跳转到顶部

jQuery - Changing width makes the page jump to the top

本文关键字：顶部 改变 jQuery      更新时间：2023-09-26

我试图有这个导航侧边栏，滑走一段时间后鼠标离开，使文本部分展开。问题是，每当滑动函数启动时，页面就会跳转到顶部。没有使用"#"，我尝试了overflow-y: scroll，在函数结束时返回false, preventDefault，但没有任何作用。

下面是js代码

$(document).ready(function(){
    $("#navbar").delay(5000).animate({left: "-=15%"});
    $("#navwrap").css("width","2%").css("position","fixed");
    $("#bodywrap").delay(5000).animate({width: "90%"});
    $("#navbar").mouseleave(function(){
        $(this).stop(true, true).delay(3000).animate({left: "-=15%"});
        $("#bodywrap").delay(3000).animate({width: "90%"});
        $("#navwrap").css("width","2%").css("position","fixed");
    });
    $("#navwrap").mouseenter(function(){
        $("#navbar").stop(true,false);
        $("#bodywrap").stop(true,false);
        if ($("#navbar").css("left") != "0%"){
            $("#navbar").animate({left: "0%"});
            $(this).css("width","15%").css("position","initial");
            $("#bodywrap").animate({width: "75%"});
        };
    });
});

这里是小提琴:http://jsfiddle.net/uuw2dzry/1/

大部分动画和延迟可以由CSS完成

http://jsfiddle.net/fkL57v9d/

你的代码过于复杂，给bug和不希望的结果留下了空间。
我会考虑用一种更简单的方式重新创建这个页面。

相关文章：