Animate image growing and moving to center of parent div

Question

I have an svg image in a div, and I'd like to animate the image to grow to 80% screen height and move to the center of the parent div upon a function being called. How do I do this?

 function openNav(){ $("#topnav").animate({height:'100%'}) $("#title").fadeOut() //This is where I'd like the image animation } openNav();

 @import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400&display=swap'); /* font-family: 'Hind', sans-serif; */ html, body { height: 100%; width: 100%; margin: 0px; background: rgb(229,239,243); background: linear-gradient(0deg, rgba(229,239,243,1) 0%, rgba(181,232,255,1) 100%); } .topnav { background-color: #2541B2; border-bottom: 2px solid black; overflow: hidden; color: white; padding: 5px 5px 2px 12px; font-family: 'Hind', sans-serif; font-weight: 400; font-size: 30px; } #logo{ height: 40px; float: left; margin-right: 5px; }

 <div id="topnav" class="topnav"> <img src="https://svgshare.com/i/ifn.svg" id="logo"> <span id="title">Website</span> </div> <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script>

Answer 1

There are a lot of ways to accomplish this. Here is one based on using .animate() . Consider the following.

 $(function() { function openNav() { $("#topnav").animate({ height: '100%' }) $("#title").fadeOut(); $("#logo").css("position", "absolute").animate({ height: $(window).height() * .8, left: ($("#topnav").width() / 2) - ($("#logo").width() / 2) }); } openNav(); });

 @import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400&display=swap'); /* font-family: 'Hind', sans-serif; */ html, body { height: 100%; width: 100%; margin: 0px; background: rgb(229, 239, 243); background: linear-gradient(0deg, rgba(229, 239, 243, 1) 0%, rgba(181, 232, 255, 1) 100%); } .topnav { background-color: #2541B2; border-bottom: 2px solid black; overflow: hidden; color: white; padding: 5px 5px 2px 12px; font-family: 'Hind', sans-serif; font-weight: 400; font-size: 30px; } #logo { height: 40px; float: left; margin-right: 5px; }

 <div id="topnav" class="topnav"> <img src="https://svgshare.com/i/ifn.svg" id="logo"> <span id="title">Website</span> </div> <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script>