我的 jquery 箭头菜单动画中的错误

Question

我正在做一个尝试使用移动箭头导航的项目。 现在我的 jquery 出了点问题。 箭头的原件不起作用，但如果我调整窗口大小，它确实起作用。 所以 de window.resize 函数有效，但 window.load 没有。 我还尝试替换 window.load bij document.ready 但这不起作用。 我希望有人可以帮助我。

该网站在线：http://jesseu.nl/madein030/ JSfiddle：http://jsfiddle.net/dgLthkjy/ HTML 代码是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Made in 030</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet" media="all" type="text/css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="js/myscript.js"></script>
</head>
<body>
    <header>
        <div class="menu_container">
            <menu>
                <ul class="left_menu" >
                    <li class="left" ><a href="#">Home</a></li>
                    <li class="left active" ><a href="#">Over</a></li>
                    <li class="left"><a href="#">Probeerlijst</a></li>
                    <li class="logo_container">
                        <div class="logo">
                            <img src="img/logo.png" alt=""/>
                        </div>
                    </li>
                    <li class="right"><a href="#">Contact</a></li>
                    <li class="right"><a href="#">Shop</a></li>
                    <li class="right"><a href="#">Blog</a></li>
                    <li id='magic-line'></li>
                </ul>
            </menu>
        </div>
        <div class="banner">
            <img src="img/banner.jpg" class="banner_image"/>
            <img src="img/skyline.png" class="skyline_image"/>
        </div>
        <div class="banner_footer">
        </div>
    </header>
</body>

Jquery 代码是：

$(window).load(function() {

window.setTimeout(function(){
    var bannerHeight = ($(".banner_image").height()+'px')
    $(".banner").css({'height': bannerHeight});
    console.log(bannerHeight);
}, 1);

var $el, leftPos, newWidth,
    $mainNav = $("menu ul");
var $magicLine = $("#magic-line");
var menuLinkWidth = $('menu ul li.active a').width() / (2);

$magicLine
    .width($("menu ul li.active").width())
    .css("left", $("menu ul li.active a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("menu ul li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    },500);
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    },500);    
});

var value = $('body').width() / (11);
$('menu ul li a').css('font-size',$('body').width()/85);
$('#magic-line').css('top',value - 9);

var outerHeight = $('menu ul li').height();
var innerHeight = $('menu ul li a').height();
$('menu ul li a').css('margin-top', (outerHeight - innerHeight)/2);

});

$(window).resize(function(){

var $el, leftPos, newWidth,
    $mainNav = $("menu ul");
var $magicLine = $("#magic-line");
$magicLine
    .width($("menu ul li.active").width())
    .css("left", $("menu ul li.active a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("menu ul li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    },500);
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    },500);    
});

var value = $('body').width() / (11);
$('menu ul li a').css('font-size',$('body').width()/85);
$('#magic-line').css('top',value - 9);

var BannerHeight = ($(".banner_image").height()+'px')
$(".banner").css({'height': BannerHeight});
console.log(BannerHeight);

var outerHeight = $('menu ul li').height();
var innerHeight = $('menu ul li a').height();
$('menu ul li a').css('margin-top', (outerHeight - innerHeight)/2);

});

CSS代码是：

#magic-line { 
position: absolute; 
left: 0; 
height: 10px; 
background-image:url(img/active.png);
background-repeat:no-repeat;
background-position:bottom center;
background-size:25px;
}

Answer 1

我自己通过改变解决了：

$(window).load(function() { 

到

onResize = function() {

结束

}
$(window).load('resize', onResize);
$(window).bind('resize', onResize);

这样我只需要写一次代码，问题就解决了。