jquery动画登录

可以使用jQuery的动画效果来实现一个简单的登录界面，具体实现如下：

HTML结构：

<form>
  <div class="form-group">
    <label for="username">用户名：</label>
    <input type="text" class="form-control" id="username" placeholder="请输入用户名">
  </div>
  <div class="form-group">
    <label for="password">密码：</label>
    <input type="password" class="form-control" id="password" placeholder="请输入密码">
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

CSS样式：

.form-group {
  margin-bottom: 1rem;
}

jQuery代码：

$(function() {
  $('form').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    var username = $('#username').val();
    var password = $('#password').val();
    if (username === '' || password === '') {
      alert('用户名和密码不能为空！');
      return;
    }
    $('form').fadeOut(500, function() { // 隐藏表单
      $('h1').text('欢迎登录，' + username + '！').fadeIn(500); // 显示欢迎消息
    });
  });
});

当用户点击登录按钮时，jQuery将获取用户名和密码的值，如果有任何一个为空，则弹出提示框。否则，jQuery将隐藏表单并显示欢迎消息，其中包含用户名。