karssen,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#wrapper{
width:500px;
overflow:hidden;
margin:50px auto 0 auto;
position:relative;
height:1000px;
}
#button {
width:250px;
margin:280px auto 0;
height:100px;
background-image:linear-gradient(to bottom,#79c7f3 0% , #2faef7 100%);
border-radius:15px;
cursor:pointer;
}
#button p{
text-align:center;
text-transform:uppercase;
line-height:100px;
color:#fff;
font-weight:bold;
}
.capture{
position:absolute;
top:0;
left:0;
width:0;
height:0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function()
{
$('#button').click(function()
{
$('#button p').text('Трансформируюсь...');
$('#button').fadeOut(2000);
$('#wrapper img').delay(1000).animate({'width': '500px', 'height': '659px'}, 2000);
}
);
$('img').click(function()
{
$('#button p').text('Нажми меня');
$('#button').fadeIn(2000);
$('#wrapper img').fadeOut(2000, function ()
{
$(this).css({'width': '0px', 'height': '0px'})
}
);
}
);
}
);
</script>
</head>
<body>
<div id="wrapper">
<div id="button">
<p>Нажми меня</p>
</div>
<img class = "capture" src="https://javascript.ru/forum/images/smilies/write.gif" alt="">
</div>
</body>
</html>