Форум

karssen · #1 (**permalink**) 19.10.2014, 17:15

Доброго времени суток. Я самый самый новичок в области разработки. Учусь самостоятельно и буду рад помощи профессионалов.
Суть проблемы такая, есть код 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. Ну и чтоб при повторном нажатии на кнопку вновь появлялась картинка. Помогите советом, кому несложно. всем добра=)

bes · #2 (**permalink**) 19.10.2014, 17:21

Сообщение от karssen

есть код html

забыл подключить jquery

собери полный тестовый пример

karssen · #3 (**permalink**) 19.10.2014, 17:39

Сори

<!DOCTYPE HTML>
<html>
<head>
<title>Кнопка</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.js"></script>
</head>

<body>

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


</body>
</html>

bes · #4 (**permalink**) 19.10.2014, 17:44

Сообщение от karssen

Сори

разметку, стили, скрипты собери в одно, jquery подключи с jquery.com, картинку возьми любую извне, либо загрузи куда-нибудь свою и подключи её, добавь кнопку запуска [html run, для увеличения области просмотра использую height - [html run height=500

karssen · #5 (**permalink**) 19.10.2014, 18:09

<!DOCTYPE HTML>
<html>
<head>
<title>Выпадающее меню</title>
<meta http-equiv="Content-Type" content="text/html; 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="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
	$(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);
		
	});
	
});
</script>
</head>

<body>

	<div id="wrapper">
		<div id="button">
		<p>Нажми меня</p>
		</div>
		<img class = "capture" src="http://f1life.ru/img/img/news/monza_2014_vettel.jpg" alt="">
	</div>


</body>
</html>

karssen · #6 (**permalink**) 19.10.2014, 18:10

Надеюсь я все правильно понял

рони · #7 (**permalink**) 19.10.2014, 18:10

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>

karssen · #8 (**permalink**) 19.10.2014, 18:18

Благодарю,все не мог понять, как правильно записать это) Если не сложно, подскажите пожалуйста как выставить еще правильно setTimeOut. Чтобы фотография начинала анимироваться не сразу при нажатии на кнопку а с задержкой 1 секунду.

рони · #9 (**permalink**) 19.10.2014, 18:22

Сообщение от karssen

задержкой 1 секунду.

строка 47 добавлено -- оба ответа есть в документации на jquery

karssen · #10 (**permalink**) 19.10.2014, 18:27

Спасибо, я ознакамливаюсь с документацией. Но к сожалению не сумел пока осилить весь объем. Пытался реализовать задержку через setTimeOut и не вспомнил про delay.

Форум

Справочник

Discord чат

Курсы javascript