Question

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

基本上我有一个ID为#NavShrink的按钮/超链接，点击这个我希望div #Header在屏幕上向上滑动130px，在屏幕上留下它的底部20px。

什么都没发生！

这是我的代码：

<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>

Answer 1

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

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

或将代码放在文档的末尾，在结束</body>标记之前。您在要对其执行操作的元素之前执行代码。

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

这是 jsFiddle example 。

Answer 2

除j08961提出的问题外，我想，另一个问题是你正在制作top属性的动画。在div（或其他元素）position: static（默认position属性）中实际上没有意义。

要设置动画，只需将position: relative分配给相关的div。

简短，尽管有希望说明，JS Fiddle demo。

Answer 3

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

你也可以使用.toggle进行幻灯片效果或滑倒。

希望它适合原因:)

<强>码

$('#NavShrink').click(function() {
    $('#Header').animate({
       // top: "-=130",
        height: "-=130"
    });
});

Click Click函数上的简单Jquery动画位置

3 个答案: