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

必须是 -> top: "-=150px",

并将 style="top: 500px; position: absolute" 添加到#foo

为什么？因为#foo 被定位在可见文档之外... ;)

于 2012-04-04T12:15:06.420 回答