代码之家 › 专栏 › 技术社区 › DeliveryNinja

当使用jquery淡出一个跨度时,我的输入框会向左跳。如何让它滑动?

html jquery javascript

DeliveryNinja · 技术社区 · 15 年前

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

当我淡出包含它们的跨距时,跨距右侧的文本输入框将向左跳来填充空白空间。如何让文本输入框在跨距隐藏时向左滑动而不是跳跃,以及在跨距淡入时向右滑动?

文本输入框的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:

如果不使用其他函数单独执行幻灯片,元素复选框就会一直跳到新行。为什么跨距跳线?

编辑3:

好吧,只是想说清楚。我有三个下拉列表,一个带有单选按钮的范围(我正在尝试淡入淡出和滑动),然后是最后一个下拉列表。当我做滑动跨度和最后一个下拉总是去一个新的行?所以我现在被困在这一点上。

3 回复 | 直到 15 年前

Matt Bridges 15 年前

使用fadeout,一旦不透明度达到零,jquery将设置 display 元素的 none . 这就是导致“跳跃”的原因。我的方法是直接 animate 不透明度而不是使用“淡出”(因此元素仍然占用空间,即使它是不可见的),然后用 slide 在现在不可见的元素上。

edit:hide(“slide”)基本上是按您的需要执行的操作: jsfiddle

Dimskiy 15 年前

您还可以尝试在按钮淡出后在“跳跃”元素上设置左边距,并在按钮淡入时将其设置回原始值。

或者,如果布局允许的话,您可能有一个包含淡入淡出按钮的容器,以始终保持在该容器中并具有固定的宽度。

对于立即触发或等待另一个动画完成的动画,请查看jquery .stop() 功能。

Vincent Mimoun-Prat Krishnan 15 年前

你需要链接动画。技巧还在于在输入元素上具有相对位置,这样当跨度变为不可见时,它就不会被向左拉。

以下工作:

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

您可能需要稍微调整一下,使其在您的页面上工作,并使其可用。