Question

可以在此fiddle中看到尝试。

我正试图通过动画淡入隐藏的文本字段。文本字段夹在另一个字段和按钮之间。我希望它可以平滑地移动所有其他元素，然后淡入/淡出隐藏元素。然而，在上面的尝试中，它似乎突然在动画的结束或开始附近移动。

HTML

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

CSS

#hidden_field{
    display: none;
}

JS

$(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替换隐藏的字段，它可以正常工作。我很感激能得到的任何帮助。

Answer 1

我认为'因为它被div所包围。这突然得到内容，但没有样式或动画处理它，所以它弹出形式，然后调整。您可以尝试删除div，然后使用

将输入保持在彼此之下

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

http://jsfiddle.net/5Fkvv/19/

Answer 2

要么做@Max建议，要么使用div包装每个输入。混合元素时，您应该了解各种元素的默认display属性如何影响布局。

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

    });
});

http://jsfiddle.net/5Fkvv/24/

jQuery：隐藏输入字段的动画

2 个答案: