基本的JQuery marginTop幫助需要

任何人都可以告訴我什麼即時做錯了！試圖在單擊菜單時使導航和徽標向上移動。然後，我會在導航的新位置下方顯示內容。我只是通過改變marginTop的值來做到這一點。基本的JQuery marginTop幫助需要

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>****</title> 
    <link href="design/style.css" rel="stylesheet" type="text/css"/> 




</head> 
<body> 
    <div id="headingBlock" style="margin-top:140px;"> 
    <div id="logo"> 
    <a href="index.html"> <img src="design/images/pmb_logo.png" alt="****"/> 
    </a> 
    </div> 
    </div> 

<div id="navStrip"> 
    <div id="navBlock"> 
    <div id="nav"> 
     <a href="index.html" id="midPage">Home</a> 
     <a href="#" class="topPage">Our Homes</a> 
     <a href="#" class="topPage">Displays</a> 
     <a href="#" class="topPage">Where we build</a> 
     <a href="#" class="topPage">Why PMB?</a> 
     <a href="#" class="topPage">Style</a> 
     <a href="#" class="topPage">Contact Us</a> 
    </div> 
    </div> 
</div> 

<script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script type="text/javascript"> 

$(function(){ 
    $(".topPage").click(function(){ 
     $("#headingBlock").animate({ 
      'marginTop': "-=140px", "slow"}); 

}); 
$("#midPage").click(function(){ 
    $("#headingBlock").animate({ 
     'marginTop': "=150px"}); 
}); 
}); 

</script> 

<p> 
</p> 


<div id="mainContainer" style="visibility:hidden"> 

<div class="mainContent"> 

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</br> 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </br> 
when an unknown printer took a galley of type and scrambled it to make a type </br> 
specimen book. It has survived not only five centuries, but also the leap into </br> 
electronic typesetting, remaining essentially unchanged. It was popularised in the </br> 
1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more </br> 
recently with desktop publishing software like Aldus PageMaker including versions of </br> 
Lorem Ipsum. </p> 



<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</br> 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </br> 
when an unknown printer took a galley of type and scrambled it to make a type </br> 
specimen book. It has survived not only five centuries, but also the leap into </br> 
electronic typesetting, remaining essentially unchanged. It was popularised in the </br> 
1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more </br> 
recently with desktop publishing software like Aldus PageMaker including versions of </br> 
Lorem Ipsum. </p> 

</div> 
<div id="imgHome"> <img src="design/images/builders.png" alt="Builders"/> 
</div> 
</div> 

<div id="footer"> 

<h1> Designed by <a href="http://www.AYLWARD-DESIGN.COM" > Aylward Design </a> </h1> 

</div> 

</body>

來源

2012-10-30 Steve Aylward

什麼是不工作？你有什麼錯誤嗎？您是否在Chrome/Firefox中檢查過調試器以獲取更多信息？你可以發佈[小提琴]（http://jsfiddle.net）？ –

變化'marginTop': "-=140px", "slow"});到'marginTop': "-=140px"}, "slow");

$(".topPage").click(function(){ 
    $("#headingBlock").animate({ 
     'marginTop': "-=140px"}, "slow"); 
});

來源

2012-10-30 02:57:38

很棒！謝謝！！ –

基本的JQuery marginTop幫助需要

回答

相關問題