Tengo una imagen svg en un div, y me gustaría animar la imagen para que crezca al 80% de la altura de la pantalla y se mueva al centro del div principal cuando se llame a una función. ¿Cómo hago esto?
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>Hay muchas maneras de lograr esto. Aquí hay uno basado en el uso de .animate() . Considera lo siguiente.
$(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>