0

What I am doing that when the page loads I want the email input to slide in from left and password input from right. But this doesn't work.

Can anyone help me with my code?

$(document).ready(function()
{

 $("#login_email").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>

 <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>
Alen
  • 1,221
  • 5
  • 21
  • 43

4 Answers4

3

You've to hide both element (email and password) using opacity:0; in CSS then use animate() function with current position.

CSS

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

JQuery

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

Check the working demo

$(document).ready(function() {

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

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

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

#login_password {
  opacity: 0;
  right: -100px;
  position: absolute;
}
<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>
Hidayt Rahman
  • 2,490
  • 26
  • 32
2

You should simply set dir="rtl" property in your password element like

<input id="login_password" dir="rtl" type="password" placeholder="Password" class="form-control" name="password" required>
parlad
  • 1,143
  • 4
  • 23
  • 42
1

You need to include jQuery UI as well.
Here you go: 

$(document).ready(function()
{

 $("#login_email,#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>
Sagiv b.g
  • 30,379
  • 9
  • 68
  • 99
1

i think this your requirement .you just try this

$(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>
R.Anandan
  • 323
  • 5
  • 19