:hover css box-shadow display error on jQuery animate

Question

So I am animating a div using jQuery. Like so:

$('#Reporting').animate({ width: 250, fontSize: 21 }, 750)

Then I have a box shadow on this with css

box-shadow: 0em 0em 0.5em 0.05em $Black;

However as soon as the animate kicks in the box-shadow is removed has anyone any idea as to why this happens? this is also removed from the :hover alternate box-shadow as well.

Thanks Tim

Answer 1

The reason is because .animate() in jQuery is adding overflow:hidden to your css and so the box-shadow even though is being applied is then hidden by the inline css that jQuery has added.

Try adding this to your jQuery

$('#Reporting').css({ 'overflow': 'visible' });

This will stop jQuery auto adding the 'hidden' to your css and set it to visible, this should also fix the :hover as well.

This should fix your box-shadow issue, quite a common issue with .animate()

Thanks Alan