jquery 我怎样才能使子 div 动画到父 div 的右边？

Question

我想设置子 div 宽度的动画以突破父 div。在我链接子项的代码中，div 在父项 div 内部进行动画处理，但不在其外部进行动画处理。

请帮忙。 jsfiddle

$(document).ready(() => {
  drop = false;
  $(".parent").click(() => {
    if (drop == true) {
      $(".child").animate({
        width: "0px"
      });
      drop = false;
    } else if (drop == false) {
      $(".child").animate({
        width: "200px"
      });
      drop = true;
    }
  })
});

.parent {
  width: 40%;
  height: 200px;
  position: relative;
  background-color: red;
}

.child {
  width: 0px;
  height: 200px;
  position: absolute;
  right: 0;
  top: 0;
  background-color: aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
  <div class="child">
  </div>
</div>

Answer 1

您可以将宽度更改为例如 400px，它会扩展到 400px。可以用100%匹配红框，也可以用150%比红框多50%

如果想向右增长，将.childright: 0的css改为left: 0。

$(document).ready(() => {
  drop = false;
  $(".parent").click(() => {
    if (drop == true) {
      $(".child").animate({
        width: "0px"
      });
      drop = false;
    } else if (drop == false) {
      $(".child").animate({
        width: "400px"
      });
      drop = true;
    }
  })
});

.parent {
  width: 40%;
  height: 200px;
  position: relative;
  background-color: red;
}

.child {
  width: 0px;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
  <div class="child">
  </div>
</div>

Answer 2

当您说您希望子元素在父元素之外向右移动时，我假设您的意思是让它滑出父元素。

您已经在 jQuery 中设置了宽度，因此您只需将 right 设置为负数，使其向相反方向延伸，例如：

  $(".child").animate({width: "200px", right: "-200px" });

然后要重置它，只需设置right:0，例如

  $(".child").animate({width: "0px", right:"0"});

工作代码段：

$(document).ready(()=> {

    drop = false;
  
  $(".parent").click(()=> {
    if(drop == true) {   
      $(".child").animate({width: "0px", right:"0"});
      drop = false;
      
    } else if(drop == false) {  
      $(".child").animate({width: "200px", right: "-200px" });
      drop = true;     
    }
  })

});

.parent {
  width: 40%;
  height: 200px;
  position: relative;
  background-color: red;
}

.child {
  width: 0px;
  height: 200px;
  position: absolute;
  right: 0;
  top: 0;
  background-color: aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
   <div class="parent">     
      <div class="child">        
      </div>     
   </div>
</body>

jquery 我怎样才能使子 div 动画到父 div 的右边？

jquery how can i animate a child div to the right out of the parent div?

html

css

jquery

jquery-animate