Question

当页面加载时我正在做什么我希望电子邮件输入从左侧滑入并从右侧输入密码。但这不起作用。

任何人都可以帮我处理我的代码吗？

＆＃13;

$(document).ready(function()
{

	$("#login_email").hide();
	$("#login_email").show('slide', {direction: 'left'}, 1000);
	$("#login_password").show('slide', {direction: 'right'}, 1000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 <input id="login_email" type="email" class="form-control" placeholder="Email" name="email" value="" required autofocus>
<input id="login_password" type="password" placeholder="Password" class="form-control" name="password" required>

＆＃13;

Answer 1

您已使用 CSS 中的opacity:0;隐藏元素（电子邮件和密码），然后使用当前位置的 animate() 功能

<强> CSS

#login_email {
  opacity: 0;
  left: -100px;
  position: absolute;
  }

<强> JQuery的

 $("#login_email").animate({
        "opacity": "1",
        "left": "0px"
      }, 1000)

检查工作演示

＆＃13;

$(document).ready(function() {

  $("#login_email").animate({
    "opacity": "1",
    "left": "0px"
  }, 1000)

  $("#login_password").animate({
    "opacity": "1",
    "left": "200px"
  }, 1000)

});

＆＃13;

#login_email {
  opacity: 0;
  left: -100px;
  position: absolute;
}

#login_password {
  opacity: 0;
  right: -100px;
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input id="login_email" type="email" class="form-control" placeholder="Email" name="email" value="" required autofocus>
<input id="login_password" type="password" placeholder="Password" class="form-control" name="password" required>

＆＃13;

Answer 2

您只需在密码元素中设置 dir =＆＃34; rtl＆＃34; 属性，例如

<input id="login_password" dir="rtl" type="password" placeholder="Password" class="form-control" name="password" required>

Answer 3

您还需要包含jQuery UI 你走了：

＆＃13;

$(document).ready(function()
{

	$("#login_email,#login_password").hide();
	$("#login_email").show('slide', {direction: 'left'}, 1000);
	$("#login_password").show('slide', {direction: 'right'}, 1000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

 <input id="login_email" type="email" class="form-control" placeholder="Email" name="email" value="" required autofocus>
<input id="login_password" type="password" placeholder="Password" class="form-control" name="password" required>

＆＃13;

Answer 4

我认为这是你的要求。你只是试试这个

$(document).ready(function()
{

	$("#login_email").hide();
    $("#login_password").hide();
	$("#login_email").show('slide', {direction: 'left'}, 1000);
	$("#login_password").show('slide', {direction: 'right'}, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

 <input id="login_email" type="email" class="form-control" placeholder="Email" name="email" value="" required autofocus>
<input id="login_password" type="password" placeholder="Password" class="form-control" name="password" required>

如何使输入在jquery中从左右滑入

4 个答案: