Unexpected behavior of slideUp and slideDown

Question

To understand my problem please visit this link. Here note textbox and button are align to each other, but when you click SlideUp button and then SlideDown their alignment get disrupted

Here is my code

$(document).ready(function(){
  $("#btSlideDown").click(function(){
    $("#txt").slideDown("slow");
    $("#b2").slideDown("slow");
  });
  $("#btSlideUp").click(function(){
    $("#txt").slideUp("slow");
    $("#b2").slideUp("slow");
  });
});

Please explain why this is happening?

Answer 1

If you add a vertical alignment style to your CSS it seems to fix the issue, similar to this:

#panel > input{
    vertical-align: middle;
}

---

DEMO - Apply vertical alignment

---

My guess is that the browser is trying to work out the alignment itself as best as possible and as the inputs are separate elements it can't quite get it right.

By specifying a vertical-align though you are telling the browser how you want it so the browser doesn't have to guess. I'm only guessing off course.

Answer 2

I've yet to determine what's causing that problem, but I do have an alternative solution:

Try wrapping those elements in a div and calling slideDown or slideUp on the wrapper.

<div id="panel">
    <div id='wrapper'>
        <input id="txt" type="text" />
        <input id="b2" type="button" value="OK"/>
    </div>
</div>

$(document).ready(function(){
    $("#btSlideDown").click(function(){
        $("#wrapper").slideDown('slow');
    });
    $("#btSlideUp").click(function(){
        $("#wrapper").slideUp('slow');
    });
});

Fiddle