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

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

我在加入滑动的演出方法效果的问题。我想让包装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/

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