Jason Bale Jason Bale - 6 months ago 27
HTML Question

Make input box slide in from left or right

here is my code: https://jsfiddle.net/hsf4yo5t/

HTML code:

<input type="button" id="my-button" value="Show text input">
<input type="text" id="my-input">


CSS code:

#my-input {
visibility: hidden;
}


Javascript code:

document.getElementById('my-button').onclick = function() {
document.getElementById('my-input').style.visibility = 'visible';
}


when I click the button, it shows. but how can i make it slide out using javascript OR jquery?

Answer Source

Here's a jQuery solution: It animates the opacity and the left parameter, which initially is set to a (negative) value so that the input field is off the screen (you have to use position: relative to make that possible):

$("#my-button").click(function() {
  $("#my-input").animate({
    'left': '0px',
    'opacity': '1'
  });
});
#my-input {
  position: relative;
  left: -300px;
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="my-button" value="Show text input">
<input type="text" id="my-input">

Right to left would be:

$("#my-button").click(function() {
  $("#my-input").animate({
    'right': '0px',
    'opacity': '1'
  });
});
#my-input {
  position: relative;
  right: -1600px;
  opacity: 0;
}

body {
  overflow-x: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="my-button" value="Show text input">
<input type="text" id="my-input">