JQuery effect makes an element move during animation

Question

When I make an animated show / hide the select element, it repositions itself during the animation. I cannot do anything according to the style of the "body"; this is the standard class markup in the application. Is there any simple CSS that I can apply to the select element so that it doesn't move?

Update: Added third select element to code and example

example: http://jsfiddle.net/DSULq/8/

 <div id="body" style="position: absolute; top: 100px;"> <div id="toolbar" style="background-color: grey; width: 400px;"> <select> <option>A</option> <option>B</option> <option>C</option> <option>D</option> <option>E</option> </select> <select id="toggleMe"> <option>A</option> <option>B</option> <option>C</option> <option>D</option> <option>E</option> </select> <select> <option>A</option> <option>B</option> <option>C</option> <option>D</option> <option>E</option> </select> </div> <div> <button>do effect</button> $("button").click(function () { if ($("#toggleMe").is(":visible")) { $("#toggleMe").hide("slide", "slow"); } else { $("#toggleMe").show("slide", "slow"); } }); 

Answer 1

How about this:

 $("button").click(function () { $("#toggleMe").fadeToggle("slow"); }); 

Demo

Answer 2

Just use a fixed position for #toggleMe:

CSS

  #toggleMe { position: fixed; top: 100px; left: 50px; } 

http://jsfiddle.net/jk46K/1/