Ich versuche, eine Div-Spitzenposition um -130 Pixel zu animieren, damit sie vom Bildschirm abweicht. Es funktioniert nicht und ich kann nicht trainieren, warum! Bin offensichtlich ein jQuery / Javascript-Neuling.

Grundsätzlich habe ich eine Schaltfläche / einen Hyperlink mit der ID #NavShrink. Wenn ich darauf klicke, möchte ich, dass der div #Header um 130 Pixel vom Bildschirm nach oben rutscht und seine unteren 20 Pixel auf dem Bildschirm belassen.

Nichts passiert!

Hier ist mein Code:

<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>
0
Emile Kelly 9 Okt. 2012 im 00:41

3 Antworten

Beste Antwort

Neben dem von j08961 aufgeworfenen Problem besteht ein weiteres Problem, wie ich mir vorstellen kann, darin, dass Sie das {{X0} animieren. } Eigentum; Dies hat in einem div (oder einem anderen Element) mit position: static (der Standardeigenschaft position) praktisch keine Bedeutung.

Zum Animieren weisen Sie einfach position: relative dem entsprechenden div zu.

Kurze, wenn auch hoffentlich anschauliche, JS Fiddle-Demo.

1
Community 23 Mai 2017 im 11:56

Wickeln Sie Ihren Code entweder in einen dokumentenbereiten Aufruf ein:

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

Oder fügen Sie Ihren Code am Ende Ihres Dokuments vor dem schließenden </body> -Tag ein. Sie führen Ihren Code aus, bevor das Element vorhanden ist, auf das er wirken soll.

Ändern Sie außerdem Ihren animierten Aufruf in $('#Header').animate({ top: "-=130"}) (kein px) und geben Sie dem #Header eine Position (z. B. Position: relativ).

Hier ist ein jsFiddle-Beispiel .

1
j08691 8 Okt. 2012 im 20:54

Hey, das ist es, wonach Sie suchen: http://jsfiddle.net/EGc96/

Sie können .toggle auch für Slide-Effekt oder Sliup und Down verwenden.

Hoffe es passt zur Ursache :)

Code

$('#NavShrink').click(function() {
    $('#Header').animate({
       // top: "-=130",
        height: "-=130"
    });
});​
0
Tats_innit 8 Okt. 2012 im 20:57