jQuery如何在子div的右侧向子div设置动画？

如何解决jQuery如何在子div的右侧向子div设置动画？

我想设置子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>

解决方法

您可以将宽度更改为例如400px，它将扩展为400px。您可以使用100％来匹配红色框，也可以使用150％来匹配红色框50％。

如果您想向右移动，请将.child right: 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>

,

当您说要让孩子在父母外部向右运动时，我想您是想让它滑出父母元素。

您已经在jQuery中设置了宽度，因此您只需要将HashMap<String,Object> scopes = new HashMap<String,Object>(); //Add date scopes.put("number_to_format",BigDecimal.ONE); scopes.put("currency",new TemplateFunction() { public String apply(String input) { NumberFormat currency = NumberFormat.getCurrencyInstance(); return currency.format(new BigDecimal(input)); } } ); MustacheFactory mf = new DefaultMustacheFactory(); Mustache mustache = mf.compile("template.mustache"); mustache.execute(writer,scopes).flush(); 设置为负数即可使其沿相反方向延伸，例如：

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;
}