JQuery animation: ignore css style

Question

When I do an animation using jQuery (for example, $(".myClass").slideDown() ), it adds some inline styles to my object:

 # Before: <div class='myItem'>...</div> # Animation: => $(".myItem").slideDown(); # After: <div class='myItem' style='display: block'> 

The question is how to return my object to its original state after the animation.

I have two approaches:

• I can use the cool wrap() function to wrap my object, animate it and unwrap() as a callback for the animation.
• I can save my original state html = $(".myItem").html() and assign it after the animation.

Why do I need it? Actually, I was digging on one website that used an ancient (but pretty cool) CSS drop-down menu . My goal is to add animation for the dropdown (slideDown) using jQuery. The problem is that my animation breaks the CSS style and stops working. Now I use my first approach with wrap , but it does not work in IE.

Answer 1

Can you not just remove the style attribute after the animation is complete, i.e. in the callback?

 $(".myItem").slideDown("slow", function() { $(this).removeAttr("style"); });