jquery在切换类之前设置z索引
要为函数生成概念证明，请忽略可怕的命名约定！；-） 我这里有一个问题 我试图达到的效果是：- 用户按下按钮，输入表单从按钮后面“滑出” 用户再次按下按钮，表单在按钮后面“向后滑动” 此小提琴正在工作，但更改z索引后仅延迟750ms 为什么会这样？是否有文件证明z-index不立即更改的原因 注意：我包括jQueryUI以允许toggleClass上的完成函数。这会影响它吗jquery在切换类之前设置z索引,jquery,css,Jquery,Css,要为函数生成概念证明，请忽略可怕的命名约定！；-） 我这里有一个问题 我试图达到的效果是：- 用户按下按钮，输入表单从按钮后面“滑出” 用户再次按下按钮，表单在按钮后面“向后滑动” 此小提琴正在工作，但更改z索引后仅延迟750ms 为什么会这样？是否有文件证明z-index不立即更改的原因 注意：我包括jQueryUI以允许toggleClass上的完成函数。这会影响它吗 谢谢这可能是回流问题。延迟工作的原因是在z-index更新和.toggleClass（）调用之间没有重新呈现页面。如果z索引
谢谢这可能是回流问题。延迟工作的原因是在
z-index.toggleClass（）.delay（）$('#SearchForm_1').height();
height（）。这可能是一个问题，因为多次频繁回流会导致“布局抖动”。但在这种情况下，这是一个有用的技巧，因为回流将有助于设置z-index
<style>
.srchFrm {
float: left;
left: -87px;
position: relative;
top: -32px;
z-index: -5;
}
.showfrm {
left: 96px;
margin: 0 !important;
position: relative;
top: -32px;
transition: all 0.5s linear 0s;
width: 300px;
}
.btn.btn-success {
border: 1px solid #FF0000;
float: left;
padding: 10px;
position: relative;
z-index: 5;
}
.search {
background-color: #F0F0F0;
border: 1px solid #DDDDDD;
height: 51px;
left: 10px;
overflow: hidden;
padding: 4px 4px 4px 0;
position: relative;
transition: all 0.5s linear 0s;
width: 392px;
z-index: 10;
}
</style>
<script>
$(document).ready(function () {
$('#commission_1').on('click', function () {
$('#SearchForm_1').toggleClass("showfrm");
});
});
</script>
<body>
<h1>Hello, world!</h1>
<div class="search">
<button type="button" class="btn btn-success" id="commission_1">Commission</button>
<form action="#" name="SearchForm" method="get" id="SearchForm_1" class="srchFrm">
<input type="text" name="s" maxlength="64" id="SearchForm" value="" class="text-comm-email" />
<input type="button" value="Go" />
</form>
</div>
</body>
.srchFrm{
浮动：左；
左-87px；
位置：相对位置；
顶部：-32px；
z指数：-5；
}
.showfrm{
左：96px；
边距：0！重要；
位置：相对位置；
顶部：-32px；
过渡：所有0.5s线性0；
宽度：300px；
}
.btn.btn-success{
边框：1px实心#FF0000；
浮动：左；
填充：10px；
位置：相对位置；
z指数：5；
}
.搜索{
背景色：#f0；
边框：1px实心#DDDDDD；
高度：51px；
左：10px；
溢出：隐藏；
填充：4×4×4×0；
位置：相对位置；
过渡：所有0.5s线性0；
宽度：392px；
z指数：10；
}
$（文档）.ready（函数（）{
$（'#佣金1'）。在（'单击'，函数（）{
$（'SearchForm_1'）。toggleClass（“showfrm”）；
});
});
你好，世界！
委员会
我不确定您想要实现什么，但如果您想让输入字段从后面出现，请立即将css转换设置从1s更改为0s（或其他任何设置），并添加z-index:-1；为了确保输入从后面滑出。我不明白为什么要更改z索引，据我所知，表单应该始终位于按钮下方，所以为什么不让按钮的z索引值高于表单？设置表单的z索引会将其置于包含div的后面。。。这就是为什么我一开始就想改变它！这是你想要的吗？Vickel，这是我想要的效果，但文本框只能在底部边缘选择。这就是为什么我要更改z索引。谢谢，但这仍然不起作用。听起来“强制回流”应该是我的下一个谷歌搜索。谢谢，这看起来不错，更简单的表单流，但是。。。这只是一个过渡，我如何才能让它滑回？这里是一个链接，我的最终版本是根据您的版本在这里感谢fro把我放在正确的道路上
<style>
.srchFrm {
float: left;
left: -87px;
position: relative;
top: -32px;
z-index: -5;
}
.showfrm {
left: 96px;
margin: 0 !important;
position: relative;
top: -32px;
transition: all 0.5s linear 0s;
width: 300px;
}
.btn.btn-success {
border: 1px solid #FF0000;
float: left;
padding: 10px;
position: relative;
z-index: 5;
}
.search {
background-color: #F0F0F0;
border: 1px solid #DDDDDD;
height: 51px;
left: 10px;
overflow: hidden;
padding: 4px 4px 4px 0;
position: relative;
transition: all 0.5s linear 0s;
width: 392px;
z-index: 10;
}
</style>
<script>
$(document).ready(function () {
$('#commission_1').on('click', function () {
$('#SearchForm_1').toggleClass("showfrm");
});
});
</script>
<body>
<h1>Hello, world!</h1>
<div class="search">
<button type="button" class="btn btn-success" id="commission_1">Commission</button>
<form action="#" name="SearchForm" method="get" id="SearchForm_1" class="srchFrm">
<input type="text" name="s" maxlength="64" id="SearchForm" value="" class="text-comm-email" />
<input type="button" value="Go" />
</form>
</div>
</body>