0

我正在尝试将 div 的顶部位置设置为动画 -130px，因此它将移出屏幕。它不工作，我不能锻炼为什么！我显然是一个 jQuery/Javascript 新手。

基本上我有一个 ID 为 #NavShrink 的按钮/超链接，单击此按钮时，我希望 div #Header 向上滑出屏幕 130 像素，将其底部 20 像素留在屏幕上。

没发生什么事！

这是我的代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body {
padding:0px;
margin:0px;
font-family: Helvetica, sans-serif;
font-size:11px;
color:#7b7a7a;
}


#Header {
height:150px;
background-color:#f4f4e9;
}



#MainNav {
padding:20px 20px 0px 20px;
width:1140px;
margin-left:auto;
margin-right:auto;
text-align:right;

position:relative;
height:130px;
}




a#NavShrink {
display:block;
width:15px;
height:15px;
background-image:url(../images/ShrinkNav.png);
position:absolute;
bottom:5px;
right:0px;
}

</style>
</head>
<body>
<div id="Wrap">
<div id="Header">
    <div id="MainNav">
            <script language="javascript" type="text/javascript">
            $('#NavShrink').click(function() {
            $('#Header').animate({ top: "-=130px"})
            })
            </script>
            <a href="#Shrink" id="NavShrink"></a>


</div>
</div>
</div>
</body>
4

3 回答 3

1

将您的代码包装在文档就绪调用中：

$(document).ready(function() {
  // Handler for .ready() called.
});

或将您的代码放在文档末尾，在结束</body>标记之前。在您希望它作用的元素存在之前，您正在执行您的代码。

此外，将您的动画调用更改为$('#Header').animate({ top: "-=130"})（无像素），并给出#Header一个位置（例如位置：相对）。

这是一个jsFiddle 示例。

于 2012-10-08T20:54:24.347 回答
1

除了j08961提出的问题之外，我想，另一个问题是您正在为top属性设置动画；这实际上在具有（默认属性）的div（或其他元素）中没有任何意义。position: staticposition

要制作动画，只需分配position: relative给相关的div.

JS Fiddle demo简短，但希望是说明性的。

于 2012-10-08T20:56:14.190 回答
0

嘿，这就是你要找的东西：http: //jsfiddle.net/EGc96/

您还可以.toggle用于幻灯片效果或 sliup 和 down。

希望它适合原因:)

代码

$('#NavShrink').click(function() {
    $('#Header').animate({
       // top: "-=130",
        height: "-=130"
    });
});​
于 2012-10-08T20:57:45.810 回答