Как определить шоу и скрыть направление Наденьте элемента

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 соскальзывала прямо за div-оберткой 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" />