アニメーションの向きを逆にする

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を追加することができます。このように、を下から上へまたは他の方向に向けることができます。

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>