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