javascript - 如何指定元素的显示和隐藏滑动方向

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 滑入飞溅包装器 div 的正后方，但现在包装器 div 从底部滑入。

Answer 1

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

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

请参见此处:https://jsfiddle.net/1q09d72b/6/

<小时/>

如果您希望它们位于同一行，有很多方法可以实现，这里有一种使用绝对定位和隐藏可见性而不是 display: none: https://jsfiddle.net/1q09d72b/8/

 $(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();
   });
 });

.wrapper {
  background: red;
  height: 50px;
  width: 50px;

}

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

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