使输入框从左或右滑入

Question

这是我的代码：https://jsfiddle.net/hsf4yo5t/

HTML code：

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

CSS代码：

#my-input {
  visibility: hidden;
}

Javascript代码：

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

当我点击按钮时，它会显示。但是如何使用javascript或jquery将其滑出？

Answer 1

如果您不介意将输入包装在元素中，可以转换document.getElementById('my-button').onclick = function() { document.getElementById('my-input').classList.toggle('show'); }以使其滑出。

span {
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

#my-input {
  transform: translateX(-100%);
  opacity: 0;
  transition: opacity .25s, transform .25s;
}

#my-input.show {
  transform: translateX(0);
  opacity: 1;
}

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

scaleX()

您也可以在输入周围没有包裹元素的情况下转换document.getElementById('my-button').onclick = function() { document.getElementById('my-input').classList.toggle('show'); }，但它实际上并没有像从左侧收缩/扩展一样滑动。

#my-input {
  transform: scaleX(0);
  opacity: 0;
  transition: opacity .25s, transform .25s;
  transform-origin: 0 0;
}

#my-input.show {
  transform: scaleX(1);
  opacity: 1;
}

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

struct stack
{
    int value;
    struct stos *w;

};

struct stack *pnt;
struct stack *prev;

void push(value);
void delete(struct stack *new);
void print_stack();
void push(int x)
{
    prev = pnt;
    pnt = (struct stack*)malloc(sizeof(struct stack));
    pnt->value=x;
    pnt->w = prev;
    printf("Top of stack: %d\n", pnt->value);
}

void delete(struct stack *new)
{
    if (new!=NULL)
    {
        prev = new->w;
        printf("Deleted: %d\n", new->value);
        free(new);
        pnt = prev;
    }
    else printf("Stack is empty\n");
}

void print_stack()
{
    printf("Content of stack:\n");
    prev = pnt;
    while (prev!=NULL)
    {
        printf("%d\n", prev->value);
        prev = prev->w;
    }
}

Answer 2

这里是一个jQuery解决方案：它动画opacity和left参数，最初设置为（负）值，以便输入字段不在屏幕上（你有使用position: relative来实现这一目标）：

＆＃13;

＆＃13;

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

＆＃13;

#my-input {
  position: relative;
  left: -300px;
  opacity: 0;
}

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;

从右到左将是：

＆＃13;

＆＃13;

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

＆＃13;

#my-input {
  position: relative;
  right: -1600px;
  opacity: 0;
}

body {
  overflow-x: hidden;
}

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是一个按输入选择的jQuery选项。 （您可以切换回按班级选择）

＆＃39;挤压＆＃39;最后可能很烦人。

<强>拨弄

https://jsfiddle.net/Hastig/etfzt6fq/

＆＃13;

＆＃13;

$(".buttonNfield input[type='button']").click(function() {
	$(".buttonNfield input[type='text']").css({
  	'width': '70%',
    'opacity': '1'
  });
})

＆＃13;

.buttonNfield {
  display: flex;
  width: 100%; 
}
.buttonNfield input[type="button"] {
  width: 30%;
  margin: 0 10px 0 0;
  cursor: pointer;
}
.buttonNfield input[type="text"] {
  width: 0%;
  overflow: hidden;
  margin: 0;
  padding: 5px;
  transition: width 1.3s ease;
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttonNfield">
  <input type="button" value="Show text input">
  <input type="text" placeholder="type here">
</div>

＆＃13;

＆＃13;

＆＃13;

<强>居中

这个从中心扩展。当聚焦最后一个空字段时，会出现提交按钮。

<强>拨弄

https://jsfiddle.net/Hastig/rjab85rc/

＆＃13;

＆＃13;

$(".buttonNfield input[type='button']").click(function() {
	var pseudoThis = $(this).closest('.buttonNfield').find("input[type='text']");
	$(pseudoThis).show( 100, function() {
  	$(pseudoThis).css({
      'display': 'flex',
      'width': '70%',
      'marginLeft': '10px',
      'opacity': '1'
    });
  });
  $(pseudoThis).focus();
})

var totalFields = 0;
var remainingFields;

$(function() {
  $("input[type='text']").each(function() {
   	totalFields = totalFields + 1;
  })
})

$("input[type='button']").on("click", function() {
	// fly in total fields box
})

$("html").on("mouseover", function() {
	remainingFields = totalFields;
  $("input[type='text']").each(function() {
    if ($(this).val() != '') {
      remainingFields = remainingFields - 1;
    }
  })
  if (remainingFields > 0) {
  	$('.remaining').html(remainingFields + ' ' + 'fields remaining');
  } else {
  	$('.remaining').css('opacity', '0');
    // fly in submit button
    $("input[type='submit']").css({
    	'marginLeft': '0',
      'marginRight': '0'
      });
  }
})

$("input[type='text']").on("focus", function() {
	if (remainingFields < 2) {
    $("input[type='submit']").css({
    	'marginLeft': '0',
      'marginRight': '0'
    });
  }
})

＆＃13;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 20px;
  overflow: hidden;
  box-sizing: border-box;
}
form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%; 
  padding-top: 50px;
}
.buttonNfield {
  display: flex;
  justify-content: center;
  width: 100%; 
  margin: 15px 0;
}
.buttonNfield input[type="button"] {
  width: 30%;
  cursor: pointer;
}
.buttonNfield input[type="text"] {
  display: none;
  width: 0%;
  overflow: hidden;
  transition: width 0.5s ease;
  opacity: 1;
  box-sizing: border-box;
}

.submitNinfo {
  display: flex;
  justify-content: center;
  width: 100%;
}
input[type="submit"] {
  margin: 5px -100% 0px 100%;
  padding: 10px;
  font-size: 20px;
  color: hsla(0, 0%, 70%, 1);
  background-color: hsla(0, 0%, 20%, 1);
  border-style: solid;
  border-color: black;
  border-width: 1px;
  border-radius: 3px;
  cursor: pointer;
  transition: margin 0.6s, background 0.2s;
}
input[type="submit"]:hover {
  background-color: hsla(0, 0%, 0%, 1);
}
.remaining {
  position: fixed;
  top: 10px;
  left: 50%; transform: translateX(-50%);
  display: flex;
  justify-content: center;
  width: 100%;
  transition: opacity 1s;
  font-size: 14px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="buttonNfield">
    <input type="button" value="Enter First Name">
    <input type="text" placeholder="type here">
  </div>
  <div class="buttonNfield">
    <input type="button" value="Enter Last Name">
    <input type="text" placeholder="type here">
  </div>
  <div class="submitNinfo">
    <input type="submit" value="submit form">
  </div>
  <div class="remaining"></div>
</form>

＆＃13;

＆＃13;

＆＃13;