Question

您好我希望最初可以看到页面顶部的提醒横幅，然后在延迟后向上动画。

之后我希望用户能够向上或向下切换元素。

这是我的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>

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

...因为你是顶级财产的动画。

Answer 2

真的，它正在发挥作用。问题：

firdt .ready（） - ＆gt;顶部：“ - 150px”，

必须是 - ＆gt;顶部：“ - = 150px”，

并将style =“top：500px; position：absolute”添加到#foo

为什么呢？因为#foo位于可见文档之外......;）

延迟后隐藏元素，然后使其切换？

2 个答案: