javascript - 仅在切换效果完成后，jQuery UI 动画文本框才会跳入容器 div

Question

我有一个容器 div，最顶部有一个单行高的 div，里面有一个 jQuery 隐藏的文本框。该栏上有一个可见的按钮。单击它应该会使隐藏的文本框滑入 View ，整个动画发生在那个细小的标题栏上。

相反，它在栏外进行动画处理，并在动画完成后跳入栏内。

当前的 JS:

$(document).ready(function() {
    $('#userNameInput').hide();
    $('#userNameInputButton').click(function() {
        $('#userNameInput').toggle('slide', {direction: 'right'}, 2000);
    });
});

检查 this JSFiddle你会明白的。我是 jQuery 的新手。我该如何解决这个问题？

Answer 1

只需包含 css

#userNameInputButton {
    float: left;
}

#userNameInput {
    width: 140px;
}

已更新 Fiddle