Is there a way to animate a logo using jQuery automatically upon page load? I want the image to zoom out, then zoom in and change to a different image. Can someone please assist me with this task? Below is the code snippet that I have:
$(document).ready(function() {
$( "#minion" ).animate({
height: '50%',
width: '50%'
}, 3000,
function() {
$( "#minion" ).animate({
opacity: 0.5
}, 1000,
function() {
$("#logo").html( $(".hiddendiv img, .hiddendiv div").clone() );
});
});
});.hiddendiv {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="logo">
<img id="minion" src="images/logo.png" />
</div>
<div class="hiddendiv">
<img src='images/logo-small.png' />
<div>complete transformation</div>
</div>Any help would be greatly appreciated.