What does animate do an element which prevents it from hiding

Question

I am using jQuery 1.4.1 .

a = $('#hello')
          .animate({height: '100px'});
a.hide();

Above code does not hide the element. I know the solution. The solution is

 a.animate({height: 'hide'});

However I am interested in finding out what does animate do to the elements which makes them not respond to hide. I looked into the source code but could not find an answer.

Does anyone know?

Answer 1

a = $('#hello')
          .animate({height: '100px'});
a.hide();

the problem i see is, after you call animate function it moves on to hide immediately. so it starts animating then hide() hides it and it continues animatning which would show it again. you want something like

$('#hello').animate({height: '100px'},2000,function(){$(this).hide()});

Answer 2

Problem is that animation take some time to complete ..

While it is in progress the selected element will remain visible..

Funky Dude has provided the correct alternative ..