反转动画方向

Question

我一直在制作冰淇淋动画。当我这样做时，半圆最初是从上到下进来的。有什么办法让它从下往上进来吗？

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>

Answer 1

您可以在 div 中添加一个 span，它的行为类似于叠加层，然后只需通过更改 top/bottom/left 或向右更改该元素的动画效果即可。像这样你可以让它从下到上或任何其他方向。

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>

反转动画方向

Reversing animation direction

css

jquery

jquery-animate