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>タグの前にコードを配置します。動作させたい要素が存在する前にコードを実行しています。

また、animate 呼び出しを$('#Header').animate({ top: "-=130"})(no px) に変更し#Header、位置を指定します (例: position:relative)。

jsFiddleの例を次に示します。

于 2012-10-08T20:54:24.347 に答える
1

j08961によって提起された問題に加えて、別の問題は、topプロパティをアニメーション化していることだと思います。（デフォルトプロパティ）divを持つ（または他の要素）では実質的に意味を持ちません。position: staticposition

アニメーション化position: relativeするには、関連するに割り当てるだけdivです。

JS Fiddle のデモ.

于 2012-10-08T20:56:14.190 に答える
0

ねえ、これはあなたが探しているものです：http: //jsfiddle.net/EGc96/

.toggleスライド効果やスリッポンダウンにも使用できます。

それが原因に合うことを願っています:)

コード

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