CODEWITHSUNDEEP
jquery
mustacheMcGee
mustacheMcGee

Reputation: 501

Hide element after delay, then make it toggle-able?

Hi I'm looking to have an alert banner at the top of page be visible initially, then animate upwards after a delay.

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

Here's my 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>

Upvotes: 0

Views: 389

Answers (2)

kernelpanic
kernelpanic

Reputation: 2956

Haven't you forgot to specify "px" units for the manual animation?

 top: '-=120px'

Also, why are you using 2 "document ready" ?

Ok, here's an example that works:

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

And don't forget to add this:

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

... since you're animating top property.

Upvotes: 1

rolivares
rolivares

Reputation: 137

Really, it's working. The problem :

firdt .ready() -> top: "-150px",

must be -> top: "-=150px",

and add style="top: 500px; position: absolute" to #foo

Why? because #foo was positioned out of visible document ... ;)

Upvotes: 0

Related Questions