如何指定元素的顯示和隱藏滑動方向

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