Search code examples
jquerycssjquery-uijquery-effects

jQuery effect causes element to reposition during animation

When I do an animated show/hide on the select element it repositions itself during the animation. I can't do anything about the style of the "body"; it's the standard class markup in the app. Is there some simple CSS I can apply to the select element prevent it from repositioning?

Update: Added the third select element to the 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");
    }
});
Solution

  • How about this:

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

    DEMO