Reversing animation direction

user_8960767 0
Viewed 82

I have been animating an ice cream. When I do this, the semi-circle originally comes in from top to bottom. Is there any way to make it come in from bottom to top?

setInterval(function() {
  "use strict";
  $(document).ready(function() {
    $("#ice_cream").animate({
      height: "50px"
    }, 1000, "swing").delay(2000);
    $("#ice_cream").animate({
      backgroundColor: "chocolate"
    }, 1000);
    $("#ice_cream").animate({
      left: "105px",
      top: "50px"
    }, 500, "swing");
    $("#ice_cream").animate({
      left: "210px",
      top: "190px"
    }, 500, "swing").delay(2000);
    $("#ice_cream").animate({
      backgroundColor: "pink"
    }, 1000);
    $("#ice_cream").animate({
      left: "315px",
      top: "50px"
    }, 500, "swing");
    $("#ice_cream").animate({
      left: "420px",
      top: "100px"
    }, 500, "swing").delay(2000);
    $("#ice_cream").animate({
      backgroundColor: "white"
    }, 1000);
    $("#ice_cream").animate({
      height: "0px"
    }, 1000, "swing").delay(2000);
    $("#ice_cream").animate({
      left: "9px"
    }, 1000);
  });
});
html {
  background-color: black;
}

#ice_cream {
  width: 100px;
  height: 0px;
  position: absolute;
  border-top-right-radius: 100px;
  border-top-left-radius: 100px;
  background-color: white;
  top: 100px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="waffle"></div>
<div id="ice_cream"></div>

jquery-animate css jquery
1 Answers

You may add a span inside your div that will behave like an overlay and then simply animate this element by changing top/bottom/left or right. Like this you can make it going from bottom to top or any other direction.

setInterval(function() {
  "use strict";
  $(document).ready(function() {
    $("#ice_cream span.overlay").animate({
      bottom: "100%"
    }, 1000, "swing").delay(2000);
    $("#ice_cream").animate({
      backgroundColor: "chocolate"
    }, 1000);
    $("#ice_cream").animate({
      left: "105px",
      top: "50px"
    }, 500, "swing");
    $("#ice_cream").animate({
      left: "210px",
      top: "190px"
    }, 500, "swing").delay(2000);
    $("#ice_cream").animate({
      backgroundColor: "pink"
    }, 1000);
    $("#ice_cream").animate({
      left: "315px",
      top: "50px"
    }, 500, "swing");
    $("#ice_cream").animate({
      left: "420px",
      top: "100px"
    }, 500, "swing").delay(2000);
    $("#ice_cream").animate({
      backgroundColor: "white"
    }, 1000);
    $("#ice_cream span.overlay").animate({
      bottom: "0"
    }, 1000, "swing").delay(2000);
    $("#ice_cream").animate({
      left: "9px"
    }, 1000);
  });
});
html {
  background-color: black;
}

#ice_cream {
  width: 100px;
  height: 50px;
  position: absolute;
  border-top-right-radius: 100px;
  border-top-left-radius: 100px;
  background-color: white;
  top: 100px;
}
#ice_cream span.overlay {
  content:"";
  position:absolute;
  display:block;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:#000;
  z-index:9;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="waffle"></div>
<div id="ice_cream"><span class="overlay"></span></div>

user_86203330
Related