Hide element after delay, then make it toggle-able?
<p>Hi I'm looking to have an alert banner at the top of page be visible initially, then animate upwards after a delay.</p>

<p>Afterwards I'd like users to be able to toggle the element upwards or downwards.</p>

<p>Here's my html:</p>

<pre><code>$(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);
  })
});


&lt;/script&gt;
&lt;/head&gt;
&lt;div id="foo"&gt;
It's a notification!
&lt;/div&gt;


&lt;p&gt;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.&lt;/p&gt;
&lt;button id="clickme"&gt;
  Click here
&lt;/button&gt;
</code></pre>
