When a span is faded out using JQuery my input box jumps left. How to get it to slide?

Question

Hi,

I have a span which contains 2 radio buttons and 2 labels. When a user selects a specific value from a drop down list it is not applicable to have the radio buttons showing so I fade them out. Again when a different value is selected I fade them back in.

When I fadeOut the span which contains them the text input box on the right of the span jumps left to fill the empty space. How can I get the text input box to slide to the left instead of jumping when the span is hidden and also slides back to the right when the span is faded in?

The id of the text input box is responseInput.

    $("#logicSelect").change( function(){
    if($("#logicSelect").val() == 10 || $("#logicSelect").val() == 9){
        $("#checkBoxes:visible").fadeOut();
        $("#newReponseRadio").val("false");
        $("#existingResponseRadio").val("true");
    }else{
        $("#checkBoxes:hidden").fadeIn();
    };
});

EDIT 1:

A brief update. I tried to do the slide and fade but its not working very well.

    if($("#logicSelect").val() == 10 || $("#logicSelect").val() == 9){
        $("#checkBoxes:visible").animate({
           opacity: 0
           }, 2000, function(){
            $("#checkBoxes").hide("slide", { direction: "left" }, 2000);
        });
    }else{
        $("#checkBoxes:hidden").animate({
           opacity: 100
           }, 2000, function(){
            $("#checkBoxes").show("slide", { direction: "right" }, 2000);
        });
    }

Firstly when it does the fade out animation it works fine. When I do the fade back to 100% its instant and not gradual. Also when it does the slide the input box decides to jump the next line and back again for some strange reason as if its resizing the elements. Any ideas? I've only just started doing JQuery today so if I'm being dense let me know.

EDIT 2:

Just doing the slide on its own without the other functions causes the element checkBoxes to jump to a new line all the time. Why is the span jumping lines?

EDIT 3:

Okay just to make things clear. I have 3 drop downs, the span with the radio buttons (which I'm trying to fade and slide) and then a final drop down list. When I do the sliding the span and the final drop down always go to a new line? so i'm stuck at this point at the moment.

Answer 1

With fadeOut, once the opacity reaches zero, jQuery will set the display of the element to none. That's what's causing the "jump." My approach would be to directly animate the opacity rather than using "fadeout" (so the element still takes up space even though it's invisible), then chain that with a slide on the element that is now invisible.

Edit: hide("slide") essentially does what you want: jsfiddle

Answer 2

You need to chain animations. Trick is also to have relative position on your input element to that it does not get pulled left when the span goes invisible.

The following works:

<div>
    <span id="fade-me">Fade out</span> 
    <input id="slide-me" type="text" value="My input" />
</div>
<div>
    <input id="animate" name="animate" type="submit" value="Go !" />
</div>

<script type="text/javascript">  
<!--
    $(document).ready(function() { 
        var spanWidth = $('#fade-me').outerWidth();
        $('#animate').click(function() {
            $('#fade-me')
            .css("position", "relative")
            .css("left", spanWidth+"px")
            .animate({ "left": "-="+spanWidth+"px" }, 1000);
        }); 
    }); 
//-->
</script>

You'll probably need to tweak things a bit to make it work on your page and make it re-usable.

Answer 3

You could also try setting margin-left on the "jumping" element once the buttons are faded out, and setting it back to its original value once the buttons start to fade in.

Or, if the layout lets you, you may have a container of the fading buttons to always stay there and be of a fixed width.

As for animations firing right away or waiting for another animation to finish, take a look at jQuery's .stop() function.