jquery 如何在父 div 的右侧为子 div 设置动画？答案

【问题标题】：jquery how can i animate a child div to the right out of the parent div?jquery 如何在父 div 的右侧为子 div 设置动画？
【发布时间】：2020-12-27 08:27:33
【问题描述】：

我想为子 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>

【问题讨论】：

欢迎来到 Stack Overflow。请参阅 How to Ask 和 edit 您的问题以包含您的代码。您可以使用编辑器工具栏上的[<>] 按钮创建可运行的堆栈片段。外部链接是可以的，但仅当相关代码也包含在此处时，因为外部链接可能会随着时间的推移而中断或更改，并且该问题对其他用户不再有用。另外，您要问的有点不清楚-“在父母之外制作动画”是什么意思？如果你不想重叠父母，你能不能把它从孩子改成兄弟姐妹？

标签： html jquery css jquery-animate

【解决方案1】：

当您说您希望孩子在右侧的父元素之外进行动画处理时，我假设您的意思是让它滑出父元素。

您已经在 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>

【讨论】：

【解决方案2】：

您可以将宽度更改为例如 400 像素，它将扩展为 400 像素。可以用 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>

【讨论】：

我希望子 div 向右而不是向左扩展。
如前所述，将right 更改为left。答案已更新。这是你需要的吗？
不完全是，现在孩子在父 div 内从左到右进行动画处理。我希望它仍然正确并向右扩展。