When the space is blank using jQuery, the input window is inserted to the left. How to make it slide?

Question

I have a range that contains 2 switches and 2 labels. When the user selects a specific value from the drop-down list, it is not applicable to show radio buttons so that I disappear. Again, when a different value is selected, I return them back.

When I have a fadeOut span that contains them, the text input box to the right of the transitions in the range is left to fill the empty space. How can I get a text input window to slide left and not jump when the sphere is hidden and also slide back right when the range fades?

The text input field identifier is the answer.

    $("#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:

Short review. I tried to make a slide and fade, but its work is not very good.

    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);
        });
    }

-, , . , 100% , . , , - , . ? JQuery , , , .

2:

checkBoxes . ?

3:

, . 3 , ( ), . , ? .

Answer 1

fadeOut, , jQuery display none. , "". , animate "fadeout" ( - , ), , slide .

: ( "" ) , : jsfiddle

Answer 2

. Trick , , .

:

<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>

, , , .

Answer 3

margin-left "", , , .

, , , .

, , jQuery . stop().