jQuery：具有隐藏输入字段的动画

从这一点可以看出一种尝试

我试图通过动画在隐藏的文本字段中淡入淡出。文本字段夹在另一个字段和按钮之间。我希望它平滑地移动所有其他元素，然后淡入/淡出隐藏元素。但是，在上面的尝试中，它似乎突然移动到动画的末尾或开头

HTML

<input>
<div>
    <input id="hidden_field">
</div>
<button type="button" id="show" class="btn">Toggle</button>

JS

#hidden_field{
    display: none;
}

$(document).ready(function(){

var isUp = true;
$('#show').on('click', function(){

    if(isUp){        
        $('#hidden_field').css({opacity:0}).slideDown("slow").animate({opacity:1});
        isUp = false;
    }else{
        $('#hidden_field').animate({opacity:0}).slideUp("slow");
        isUp = true;
    }

});
});

---

奇怪的是，如果我用一个隐藏的div之类的东西来替换隐藏字段，效果会很好。我非常感谢能得到的任何帮助。

我认为这是因为它被div包围了。它突然获得了内容，但没有样式或动画来处理它，所以它会跳出形式，然后进行调整。您可以尝试删除div，然后使用

input, button { float:left; clear:both; }

---

按照@Max的建议执行，或者使用

div

s包装每个输入。混合元素时，应注意各种元素的默认

显示

属性如何影响布局

<div id="visibleWrapper">
    <input>
</div>
<div id="hiddenWrapper">
    <input id="hidden_field">
</div>

#hiddenWrapper{
    display: none;
}


$(document).ready(function () {
    var isUp = true;
    $('#show').on('click', function () {

        if (isUp) {
            $('#hiddenWrapper').css({
                opacity: 0
            }).slideDown("slow").animate({
                opacity: 1
            });
            isUp = false;
        } else {
            $('#hiddenWrapper').animate({
                opacity: 0
            }).slideUp("slow");
            isUp = true;
        }

    });
});

#隐藏包装{
显示：无；
}
$（文档）.ready（函数（）{
var isUp=true；
$（'#show'）。在（'click'，函数（）{
如果（isUp）{
$（'#hiddenWrapper'）.css({
不透明度：0
}).向下滑动（“缓慢”）。设置动画({
不透明度：1
});
isUp=false；
}否则{
$（'hiddenWrapper'）。设置动画({
不透明度：0
}).slideUp（“慢”）；
isUp=true；
}
});
});

---

此处的代码输入标记未正确关闭。这可能会在不同的浏览器上产生问题。这似乎在动画接近尾声时有点断裂。不过，这肯定更好。