Question

在初始化与socket.io服务器的成功连接后插入Web表单。它看起来像这样：

    $('#login').append('<div class="title">typical title</div>');
    $('#login').append('<div class="subtitle">enter wittiness here</div>');
    $('#login').append('<form><hr>');
    $('#login form').append('<div style="text-align:center;"> Username: <input type="text" placeholder="Username..." id="username" name="username"></div>');
    $('#login form').append('<div style="text-align:center;"> Password: <input type="password" placeholder="Password..." id="password" name="password"></div>');
    $('#login form').append('<hr width="80%" /><input type="submit" class="login" value="Log in!" /><input type="button" class="register" value="Registration" />');

在我看来，这看起来并不好看，有没有办法我可以加载这个html片段或让这段代码看起来更好，它也在客户端也是如此，所以每个人都可以查看这个丑陋...

Answer 1

你可以先将它设置为display：none或者用hide（）方法隐藏它，然后在append（）

后显示它

例如，首先创建一个节点并将其隐藏（ hide（）正在添加display：none），所以

node=$('<div style="text-align:center;"></div>').hide();

然后追加节点并使用show中的任何效果，fadeIn，slidedown将显示它

显示（）

$('#login form').append(node).show("slow");

fadeIn（）看起来会更漂亮

$('#login form').append(node).fadeIn("slow");

你也可以看看滑动效果

<强>了slideDown（）

$('#login form').append(node).slideDown("slow");

Answer 2

$('#login').append('<div class="title">typical title</div><div class="subtitle">enter wittiness here</div><form><hr>');
$('#login form').append('<div style="text-align:center;"> Username: <input type="text" placeholder="Username..." id="username" name="username"></div><div style="text-align:center;"> Password: <input type="password" placeholder="Password..." id="password" name="password"></div><hr width="80%" /><input type="submit" class="login" value="Log in!" /><input type="button" class="register" value="Registration" />');

JQuery使html插入看起来更好

2 个答案: