Question

谁能告诉我我做错了什么！单击菜单时，尝试使导航和徽标向上移动。然后，我将在导航的新位置下方显示内容。我只是通过改变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>

Answer 1

将'marginTop': "-=140px", "slow"});更改为'marginTop': "-=140px"}, "slow");

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

需要基本的JQuery marginTop帮助

1 个答案: