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

user_14142801 0
Viewed 172

I want to animate the width of the child div to break out of the parent div. In my code which I am linking the child, div animates inside of the parent div but not outside of it.

Please help. 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-animate css html jquery
2 Answers

When you say you want the child to animate outside the parent to the right, I assume you mean for it to slide out of the parent element.

You are already setting the width in your jQuery, so you just need to set the right to a negative number to make it extend the opposite direction, e.g.:

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

Then to reset it, just set right:0, e.g.

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

Working Snippet:

$(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>

user_5148780

You can change the width to for example 400px and it will expand to 400px. You can use 100% to match the red box or use 150% to be with 50% more than the red box.

If you want to grow to the right, change the css of the .child right: 0 to 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>

user_134330960
Related