1

Why this animate display none to block not working ?

First code look like this, and it's work good

$(".box_outer").stop().animate({top: '25px' , opacity: 1}, 100);

When i add display: none; to class box_outer and add , display: 'block'

My function animate not work , how can i do that ?

$(".box_outer").stop().animate({top: '25px' , display: 'block' , opacity: 1}, 100);
nomwery geqoilu
  • 109
  • 2
  • 10

3 Answers3

0

The animate() method works with only properties with numerical values, display is not 1 of them so try

$(".box_outer").stop().show().animate({top: '25px', opacity: 1}, 100);

or if you want to animate the display also, set the height to 0 then use height: 'show' as an animation property

Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
0

You cannot animate display See this article for a workaround

http://www.impressivewebs.com/animate-display-block-none/

Live Demo: http://jsbin.com/iZUGaKI/1/

Sam Battat
  • 5,725
  • 1
  • 20
  • 29
0

as far as i know you cant animate display property but you can use show() hide() or fadeIn() fadeOut() for the same purpose and they will work well with display:none

$(".box_outer").show(100);

OR

$(".box_outer").fadeIn(100);
himanshu
  • 1,732
  • 1
  • 11
  • 12