扭转动画方向

Question

我一直在制作冰淇淋。当我这样做时，半圆最初是从上到下进入的。有没有办法让它从下到上进入？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="waffle"></div>
<div id="ice_cream"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以在div中添加span，其行为类似于叠加层，然后通过更改顶部/底部/左侧或右侧来简单地为此元素设置动画。像这样，你可以让它从从下到上或任何其他方向。

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>