Question

I seem to be missing something here, so if someone could explain to me the process that is going on under the hood, I’d much appreciate it.

What I’m trying to accomplish is to get the .slideDown() effect that jQuery offers after removing the CSS on the element that hid the contents of that particular element.

I’ve created a fiddle to explain/show more of what I’m trying to do:

http://jsfiddle.net/iOnline247/4Ztpg/

Again, I’d like to know about the innards of what and why what I’m doing isn’t working. I’m sure it has something to do with the size of my brain, but let’s be nice…

Edit——
The inline styling is how the HTML is rendered from the server. I have no control over that whatsoever unfortunately.

Answer 1

.slideDown() will take an element that isn’t visible and make it visible with an animation. If you first remove the style that is making it not visible, then it will appear immediately. Once it is visible .slideDown() will do nothing.

So the question is, why are you removing the style in the first place? And why do you have an inline style set?

If you need to override the inline style (and for some reason, can’t just remove it from the source HTML), then you can do this when your document loads:

$(function() {
    $(".some-text").css("display","none");
});

Now your slide down will work and you don’t need to remove any classes. When you set a style with .css it will override any inline styles.

Edit: Here’s a fiddle to demonstrate:

http://jsfiddle.net/VjWEs/1/

Note I wrapped your div in another div so you can see that it’s actually displaying as block when it appears. If you change the .css("display","none"); to .hide() you will preserve the inline display, but then it can’t slide down anymore, it’ll just appear.