1

在这个小提琴中可以看到一个尝试。

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

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

4

2 回答 2

2

要么执行@Max 建议的操作，要么使用divs 包装每个输入。当您混合元素时，您应该知道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/

于 2013-06-08T05:43:46.330 回答
1

我认为是因为它被 div 包围了。这突然得到了内容，但没有设置样式或动画来处理它，所以它会形成形式，然后进行调整。您可以尝试删除 div，然后将输入保持在彼此下方

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

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

于 2013-06-08T05:33:31.853 回答