Question

使用以下HTML：

<div id="container" style="width: 100%; overflow-x: hidden;">
  <div id="left" style="width: 50%; display: inline-block;">
  </div>
  <div id="right" style="width: 50%; display: inline-block;">
  </div>
</div>

我想为左div设置宽度动画：100％，然后让右div滑到右边。

我以为溢出-x：隐藏会起作用，但是一旦左div达到51％，右div就会立即降到左div以下。

有什么想法吗？

Answer 1

使用$(document).ready(function(){ // click on button submit $("#search").on('click', function(){ // send ajax console.log($("#FlightForm").serialize()) ; $.ajax({ url: '/', // url where to submit the request type : "POST", // type of action POST || GET dataType : 'json', // data type data : $("#FlightForm").serialize(), // post data || get data success : function(data, status, xhr ) { window.location.replace("http://localhost:3000/searching"); }, error: function(xhr, resp, text) { console.log("Error happening"); window.location.replace("http://localhost:3000/error"); } }) }); });的父级div并将display: flex设置为避免浏览器试图将父级中的子级设置为合适

flex: 0 0 auto

#container {
  width: 100%;
    overflow-x: hidden;
    display: flex;
}
#left {
  background-color: blue;
  height: 100px;
  width: 62%;
    flex: 0 0 auto;
}
#right {
  background-color: red;
  
  height: 100px;
  width:50%;
    flex: 0 0 auto;
}

在屏幕外向右动画div

1 个答案: