0
我工作的一個項目，我嘗試使用移動箭頭導航。 現在我的jQuery中出現了一些問題。 箭頭的原始不起作用，但如果我調整窗口的大小，它確實工作。 所以de window.resize函數工作，但window.load不。 我也嘗試更換window.load bij document.ready，但這不起作用。 我希望有人能幫助我。錯誤在我的jQuery箭頭菜單動畫
該網站是在線瀏覽：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;
}
:-) http://jsfiddle.net/2duz0ty8/ – clement 2014-12-04 08:35:42
@clement http://jsfiddle.net/dgLthkjy/） – 2014-12-04 09:13:22