Question

为了生成函数的概念证明，所以忽略可怕的命名约定！ ; - ）

我在这里有一个JSFiddle http://jsfiddle.net/Dde8d/

$(document).ready(function () {
    $('#commission_1').on('click', function () {
        var newZIndex = -1;
        if ($('#SearchForm_1').hasClass('showfrm')) {
            $('#SearchForm_1').css("z-index", newZIndex);
            /* Remove the comment below to make it work */
            /*$('#SearchForm_1').delay(750);*/
            /*it was chained on the line above */
        }
        $('#SearchForm_1').toggleClass("showfrm", 500, function () {
            if ($('#SearchForm_1').hasClass('showfrm')) {
                newZIndex = 100;
            }
            $('#srchText1').toggleClass("shrt", 500, function () {
                $('#commission_1').toggleClass("btn-success").toggleClass("btn-primary", 1000, function () {
                    $('#comm-icon-1').toggleClass("glyphicon-chevron-right").toggleClass("glyphicon-chevron-left");
                    $('#SearchForm_1').css("z-index", newZIndex);
                });
            });
        });
    });
});

我想要达到的效果是： - 用户按下按钮，输入表格＆＃39;滑出＆＃39;从后面的按钮用户再次按下按钮，形成“向后滑动”状态。在按钮后面。

这个小提琴正在工作，但只有在更改z索引后延迟750毫秒。

这是为什么？是否有记录的原因使z-index不能立即改变。

注意：我包含了JQuery UI以允许在toggleClass上使用完成功能。这会影响它吗？

谢谢

Answer 1

这可能是一个回流问题。延迟工作的原因是页面未在z-index更新和.toggleClass()调用之间重新呈现。如果z-index在切换类之前生效，则需要这样做。

您可以将.delay()更改为

$('#SearchForm_1').height();

height()的诀窍和同时问题在于它总是强制重排。这可能是一个问题，因为多次频繁的回流会导致布局颠簸＆＃34;。但在这种情况下，它是一个有用的技巧，因为重排将有助于设置z-index。

Answer 2

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

jquery在toggleClass之前设置z-index

2 个答案: