css - JQuery animate behaviour with inline-block elements -


i'm using jquery animate 2 divs, 1 on top of other, inside div. effect button top , bottom halves opening , down reveal contents. idea have number of these 'buttons' in line using float:left

when button clicked, script checks if button open, if so, closes button , opens clicked button.

this works fine, except want change float:left display:inline-block on container div class (to prevent wrapping of number of buttons if browser resized). problem layout of buttons breaks jquery animate seems changing vertical position of button containers while animating.

see fiddle

.btn{   display:inline-block;   vertical-align:top;   margin-left: 20px; } 

see fiddle


Comments

Popular posts from this blog

java - How to specify maven bin in eclipse maven plugin? -

single sign on - Logging into Plone site with credentials passed through HTTP -

php - Why does AJAX not process login form? -