jQuery show/hide margin issue

jQuery show/hide margin issue

precodelt;scriptgt; $(document).ready(function(){
$(.text-button-degree).click(function(){ var ul = $(this).next(ul); if
(ul.is(:hidden)) { ul.show(300); } else { ul.hide(300); } }); });
lt;/scriptgt; /code/pre hr precode#engineering_small {
background-image:url(img/faculty_icons/engineering_small.png); width:25px;
height:25px; } .degree-list-group { display:none; } .degree-list-group li
{ margin-left:35px; margin-top:15px; font-size:12px; } .text-button-degree
{ background:none !important; border:none !important; margin-left:10px;
padding-left:0px; margin-top:-1px; color:#ff6445 !important;
font-size:18px !important; } /code/pre hr precodelt;divgt; lt;div
id=engineering_small style=float:left;gt;lt;/divgt; lt;input type=button
name=sort-div value=Architecture class=text-button-degree/gt; lt;ul
class=degree-list-groupgt; lt;ligt;lt;a
href=#gt;Architecturelt;/agt;lt;/ligt; lt;ligt;lt;a href=#gt;Civil
engineeringlt;/agt;lt;/ligt; lt;/ulgt; lt;/divgt; /code/pre pEverything
works as it should; the ul unrolls as needed, though, I need to change the
font-size of the button. When I do that, the code still works, though, the
roll motion is sort of weird. The ul is shifted to the right a bit on the
start of the animation, and when the animation ends, it jumps to the
position where it should be./p pI have no idea what's causing this, but
apparently, font-size of the button seems to be involved. /p