Question

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