Question

我目前有：

<div class="splash-wrapper">
</div>
<div class="wrapper">
</div>
<input type="button" runat="server" id="btnAccept" class="btn-input" value="ACCEPT" />

 $(document).ready(function() {
     $('.wrapper').hide();
     $('#btnAccept').click(function(e) {
          $(".splash-wrapper").hide("slide", { direction: "right"}, 200);
          $(".wrapper").show().show("slide", { direction: "right" }, 200);
          $('#btnAccept').hide();
     });
 });

demo

我在向show方法添加滑动效果时遇到问题。我希望包装器div在splash-wrapper div后面滑动，但是现在包装div从底部滑入。

Answer 1

您在包装器上调用show方法两次，这就是为什么它没有动画的原因。

$(".wrapper").show().show("slide", { direction: "right" }, 200);
             -------

见这里：https://jsfiddle.net/1q09d72b/6/

如果你希望它们在同一行，有很多方法可以做到这一点，这里有一个使用绝对定位和隐藏可见性而不是display: none：https://jsfiddle.net/1q09d72b/8/

＆＃13;

 $(document).ready(function() {
   $('.wrapper').css('visibility', 'hidden');
   $('#btnAccept').click(function(e) {
     e.preventDefault();
     $(".splash-wrapper").hide("slide", {
       direction: "right"
     }, 200);
     $(".wrapper").css('visibility', 'visible').show("slide", {
       direction: "right"
     }, 200);
     $('#btnAccept').hide();
   });
 });

＆＃13;

.wrapper {
  background: red;
  height: 50px;
  width: 50px;

}

.splash-wrapper {
  background: green;
  height: 50px;
  width: 50px;
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div class="splash-wrapper">

</div>
<div class="wrapper">

</div>
<input type="button" runat="server" id="btnAccept" class="btn-input" value="ACCEPT" />

＆＃13;

如何指定元素的显示和隐藏幻灯片方向

1 个答案: