Jquery动画错误地定位了一个元素，我希望它在侧面，而动画显示它在底部

我想在另一侧添加一个元素，因此，我使用了一个span元素来完成此操作。 问题是，我希望使用jquery为其设置动画，在动画过程中，元素被定位在底部而不是侧面（动画完成后，它被正确地放置在侧面）

这是密码

<div>Name<input id="name"/></div>
<div>Username <input id="user"/></div>
<button id="registerButton">Send -></button>


<script>
$('#registerButton').click(function() {       
    if($('#name').val().length<3) {                             
        $('#name').after($('<span id="warning">At least 3 chars</span>'));      
        $('#warning').hide();
        $('#warning').show(400);
    }                              
});
</script>

名称
用户名
发送->
$（'#registerButton'）。单击（函数（）{
if（$（'#name'）.val（）.length我可以证明Zinilloander的答案。在webkit中，它可以做您想要的一切，这取决于css在标记中的空间大小。
$（'#registerButton'）。单击（函数（）{
$('#registerButton').click(function() {       
    if($('#name').val().length<3) {                             
        if($('#warning').length == 0) {
            $('#name').after($('<span id="warning" style="display:none">At least 3 chars</span>'));
        }
        $('#warning').show(400);
    } else {
        $('#warning').hide();
    }                             
});

如果（$（“#name”）.val（）.lengthI在#name左侧的waring附录中测试了您的代码，那么我想问题出在您的css中。可能您已经为父分区设置了一个宽度，试图删除所有css规则，问题仍然存在于JSFIDLE上，所有都可以正常工作，但当我尝试使用“正常”时网页问题发生了，它仍然会这样做如果
Name Username Send->
只是为了测试问题的来源，您可以将现有的标记包装到
your markup
中。这意味着您的浏览器应该为元素保留更多的空间，这样您就可以看到问题是否来自错误的给定大小e（甚至你可以知道你需要多少）通过css为你的完整动画和输入字段放在一起。已经完成了，但问题仍然存在。它能依赖于导入的jquery版本吗？我从google服务器导入它，也许JSFIDLE使用了一个最新版本来解决这种“错误”这不可能来自jQuery，jQuery使用css规则，就像你自己使用的一样，它们没有额外的技巧。因此，如果css规则不可行，你就不能使用jQuery，但你可以使用javascript的动态行为和jQuery来隐藏错误的视觉效果。例如，隐藏元素，直到它达到完全大小如果它的一些较小的视觉部分在动画中会破坏你的布局，我建议反复检查css有什么问题。