0

こんにちは私はページの上部にあるアラートバナーを最初に表示し、しばらくしてから上向きにアニメーション化することを望んでいます。

その後、ユーザーが要素を上または下に切り替えることができるようにしたいと思います。

これが私のhtmlです：

$(document).ready( function() {
$('#foo').delay(3000).animate({
    top: "-150px",
  }, 1000, function() {
    // Animation complete.
  });
      });
      $(document).ready(function() {
  $('#clickme').toggle(function() {
    $('#foo').animate({
      top: '-=120'
    }, 1000);
  },function() {
    $('#foo').animate({
      top: '+=120'
    }, 1000);
  })
});


</script>
</head>
<div id="foo">
It's a notification!
</div>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
tortor arcu, sollicitudin et rutrum non, dapibus convallis est. Nulla in
est risus, sit amet consectetur eros. Aliquam posuere, tellus at cursus
pulvinar, mi nulla bibendum sapien, quis lobortis diam risus nec lectus.
Sed justo nunc, lacinia ac sagittis non, aliquam nec est. Praesent porta
neque sed erat vehicula id cursus quam semper.</p>
<button id="clickme">
  Click here
</button>
4

2 に答える 2

1

手動アニメーションの「px」単位を指定するのを忘れていませんか？

 top: '-=120px'

また、なぜ2つの「ドキュメント対応」を使用しているのですか？

わかりました、これが機能する例です：

<script type="text/javascript">

 $(document).ready( function() {


  $('#foo').delay(3000).animate({
    top: "-150px",
   }, 1000, function() {
     // Animation complete.
   });

  $('#clickme').toggle(function() {
     $('#foo').animate({
       top: '0'
     }, 1000);
  },function() {
     $('#foo').animate({
       top: '-150px'
     }, 1000);
  });


 });

</script>

そして、これを追加することを忘れないでください：

 <style type="text/css">
    #foo {position: absolute;}
 </style>

...トッププロパティをアニメートしているので。

于 2012-04-04T11:52:28.583 に答える
0

本当に、それは働いています。問題 ：

firdt .ready() -> トップ: "-150px",

でなければなりません -> 上: "-=150px",

style="top: 500px; position: absolute" を #foo に追加します

なんで？#foo が可視ドキュメントの外に配置されたため... ;)

于 2012-04-04T12:15:06.420 に答える