CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user775736
user775736

Reputation: 29

Simple jQuery animation not working

can anyone help me fix this, what am I missing?

<script type="text/javascript"> 

  $('#loginButton').click(function() {
     $('#toplogin').animate({
       height: '0px'
     });
  });
</script>

The onClick doesn't even execute!

The div I want the onClick event to work on is here:

 <div id="loginButton"><a href="#" title="login">Login &raquo;</a></div>

The div I want the animation to affect is here:

div id="toplogin"> <!-- more stuff -->  </div>

Upvotes: 0

Views: 6275

Answers (3)

FoRever_Zambia
FoRever_Zambia

Reputation: 1169

you should wrap your code in following construction to make it valid as jQuery code:

$(document).ready(function(){
    your code;
})

Upvotes: 0

Marcel
Marcel

Reputation: 28097

Remove the semicolon after height: '0px' to make your JavaScript valid.

<script type="text/javascript">
  $('#loginButton').click(function() {
     $('#toplogin').animate({ height:'0px' });
  });
</script>

However, unless you have overflow:hidden set for #toplogin the element will still be visible, even though it's height is 0px. An easier way is just using slideUp().

<script type="text/javascript">
  $('#loginButton').click(function(){ $('#toplogin').slideUp(); });
</script>

Upvotes: 3

thecodeparadox
thecodeparadox

Reputation: 87083

try this:

$('#loginButton').click(function() {
    $('#toplogin').animate({
        height: 0
    },
    function() {
        $(this).css('display', 'none');
    });
});

Upvotes: 0

Related Questions