Using jQuery's slideDown with display: inline-block

javascript jquery slidedown
user825286 picture user825286 · Feb 26, 2012 · Viewed 16.1k times · Source

How can I use jQuery's slideDown with display: inline-block, as opposed to the default display: block;

Some of the content inside the div I'm using requires it to be so, and the design partly breaks unless I fix it. However, fixing it after the sliding down has finished will be glitchy.

Any ideas?

Answer

themarcuz picture themarcuz · Feb 26, 2012

You should probably wrap the div with display: inline-block, into another div, with simple display: none, that will be the target of your slideDown function. I made up a demo for you here http://jsfiddle.net/d3BHL/2/
Let me know if it helps

Related questions

jQuery - Read More / Read Less. How to replace text?

HTML: <a href="#" class="show_hide" data-content="toggle-text">Read More</a> jQuery: // Slide Up Slide Down $('.show_hide').toggle(function(){ $(this).text().replace("Read More", "Read Less"); $('.' + $(this).attr('data-content')).slideDown(); },function(){ $(this).…

Read More
jQuery slideDown with easing

How can use the slideDown() function with easing? Maybe extend it somehow? I'm looking for something like this: jQuery.fn.slideDown = function(speed, easing, callback) { return ... }; So i can use it slide this $('.class').slideDown('400','easeInQuad'); or …

Read More
jQuery slideDown is not smooth

I have this little jQuery slideDown effect http://jsfiddle.net/Gg4eP/2/ But the animation isn't smooth? What I am doing wrong? Thanks for your time.

Read More