CODEWITHSUNDEEP
jquery
iOnline247
iOnline247

Reputation: 126

Animate an element after removing css that hid the element

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.

Upvotes: 0

Views: 135

Answers (3)

Matt Burland
Matt Burland

Reputation: 45135

.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.

Upvotes: 2

Jonathan Eckman
Jonathan Eckman

Reputation: 2077

There are already good answers to this question but I made a Fiddle anyway. Hope it helps. I changed the your demo so you didnt have to use inline styles. Read more on this here .

//jQuery
$('#clickme').click(function() {
  $('.some-text').slideDown('slow', function() {
     //slide done, can do more stuff here if u need to
  });
});


<!-- HTML -->
<h3 id="clickme">More Info</h3>
<div class='some-text'>The div to slide</div>


/*CSS*/
.some-text { height: 20px; display: none; }

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227240

You should keep all CSS in your CSS file, and not use any inline styles, also you should never need to use !important in your CSS.

That being said, you don't need to remove the no-display class before sliding down. slideDown will add display:block to your element after sliding it down (you can remove the class in the callback if you want).

Upvotes: 1

Related Questions