[karssen]

Доброго времени суток. Я самый самый новичок в области разработки. Учусь самостоятельно и буду рад помощи профессионалов.
Суть проблемы такая, есть код html:

<div id="wrapper">
		<div id="button">
		<p>Нажми меня</p>
		</div>
		<img class = "capture" src="images/1.jpg" alt="">
	</div>

Есть стили :

#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;
}

И начало самого JQuery кода:

$(document).ready(function(){

	$('#button').click(function(){
		
		$('#button p').text('Трансформируюсь...');
		$('#button').fadeOut(2000);
		$('#wrapper img').animate({'width':'500px','height':'659px'},2000);
		
	
	});
	$('img').click(function(){
		$('#button p').text('Нажми меня');
		$('#button').fadeIn(2000);
		$('#wrapper img').fadeOut(2000);
		
	});
	
});

Собственно что я пытаюсь реализовать. Чтоб при клике на кнопку выезжала картинка. Далее при клике на картинку, она бы становилась постепенно прозрачной до 100% и лишь после этого ее ширина и высота сбрасывались в 0. Ну и чтоб при повторном нажатии на кнопку вновь появлялась картинка. Помогите советом, кому несложно. всем добра=)