html - jquery 如何将子 div 动画化到父 div 的右侧？-6ren

html - jquery 如何将子 div 动画化到父 div 的右侧？

转载作者：行者123 更新时间：2023-12-04 08:56:29

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

最佳答案

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

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

关于html - jquery 如何将子 div 动画化到父 div 的右侧？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63802597/