here is my code: https://jsfiddle.net/hsf4yo5t/
这是我的代码:https://jsfiddle.net/hsf4yo5t/
HTML code:
HTML代码:
<input type="button" id="my-button" value="Show text input">
<input type="text" id="my-input">
CSS code:
CSS代码:
#my-input {
visibility: hidden;
}
Javascript code:
Javascript代码:
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?
当我点击按钮时,显示。但是如何使用javascript或jquery将其滑出?
3 个解决方案
#1
2
If you don't mind wrapping the input in an element, you can transition translateX()
to make it slide out.
如果您不介意将输入包装在元素中,则可以转换translateX()以使其滑出。
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>
You can also transition scaleX()
without a wrapping element around the input, but it isn't really sliding as much as contracting/expanding from the left side.
您也可以在输入周围没有包裹元素的情况下转换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">
#2
1
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):
这是一个jQuery解决方案:它动画不透明度和左参数,最初设置为(负)值,以便输入字段不在屏幕上(你必须使用position:relative来实现这一点):
$("#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">
#3
1
Here's a jQuery option selecting by input. (you can switch back to selecting by class)
这是一个按输入选择的jQuery选项。 (您可以切换回按班级选择)
The 'squeeze' at the end may be annoying.
最后的“挤压”可能很烦人。
fiddle
小提琴
https://jsfiddle.net/Hastig/etfzt6fq/
https://jsfiddle.net/Hastig/etfzt6fq/
$(".buttonNfield input[type='button']").click(function() {
$(".buttonNfield input[type='text']").css({
'width': '70%',
'opacity': '1'
});
})
.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;
}
<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>
Centered
中心
This one expands from center. The submit button appears when the last empty field is focused on.
这个从中心扩展。当最后一个空字段被聚焦时,将出现提交按钮。
fiddle
小提琴
https://jsfiddle.net/Hastig/rjab85rc/
https://jsfiddle.net/Hastig/rjab85rc/
$(".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'
});
}
})
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;
}
<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>
#1
2
If you don't mind wrapping the input in an element, you can transition translateX()
to make it slide out.
如果您不介意将输入包装在元素中,则可以转换translateX()以使其滑出。
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>
You can also transition scaleX()
without a wrapping element around the input, but it isn't really sliding as much as contracting/expanding from the left side.
您也可以在输入周围没有包裹元素的情况下转换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">
#2
1
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):
这是一个jQuery解决方案:它动画不透明度和左参数,最初设置为(负)值,以便输入字段不在屏幕上(你必须使用position:relative来实现这一点):
$("#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">
#3
1
Here's a jQuery option selecting by input. (you can switch back to selecting by class)
这是一个按输入选择的jQuery选项。 (您可以切换回按班级选择)
The 'squeeze' at the end may be annoying.
最后的“挤压”可能很烦人。
fiddle
小提琴
https://jsfiddle.net/Hastig/etfzt6fq/
https://jsfiddle.net/Hastig/etfzt6fq/
$(".buttonNfield input[type='button']").click(function() {
$(".buttonNfield input[type='text']").css({
'width': '70%',
'opacity': '1'
});
})
.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;
}
<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>
Centered
中心
This one expands from center. The submit button appears when the last empty field is focused on.
这个从中心扩展。当最后一个空字段被聚焦时,将出现提交按钮。
fiddle
小提琴
https://jsfiddle.net/Hastig/rjab85rc/
https://jsfiddle.net/Hastig/rjab85rc/
$(".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'
});
}
})
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;
}
<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>