当使用JQuery淡出范围时,我的输入框向左跳.如何让它滑动？

Question

我有一个包含2个单选按钮和2个标签的跨度.当用户从下拉列表中选择特定值时,不适用于显示单选按钮,因此我将其淡出.再次选择不同的值时,我会将它们淡入.

当我淡出包含它们的跨度时,跨度右侧的文本输入框向左跳跃以填充空白区域.当跨度隐藏时,如何让文本输入框向左滑动而不是跳跃？当跨度渐入时,如何向右滑动？

文本输入框的id是responseInput.

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

编辑1:

简要更新.我试图做滑动和褪色,但它不能很好地工作.

    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使用不透明度而不是使用"淡出"(因此即使元素不可见,元素仍占用空间),然后将链接与slide现在不可见的元素链接起来.

编辑:隐藏("幻灯片")基本上做你想要的:jsfiddle