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

How to specify an element's show and hide slide direction

本文关键字：隐藏 幻灯片 方向 显示 何指定 元素      更新时间：2023-09-26

>我目前有： 

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

演示

我在向显示方法添加滑动效果时遇到问题。我希望包装器div 滑入飞溅包装器div 的后面，但现在包装器div 从底部滑入。

你在包装器上调用了两次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" />

相关文章：