Javascript-форум - Исчезновение картинок по нажатию

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Исчезновение картинок по нажатию (https://javascript.ru/forum/jquery/75958-ischeznovenie-kartinok-po-nazhatiyu.html)

Исчезновение картинок по нажатию

Всем привет, задали мне тут одно задание, сам в JS не силен, но перегуглив весь инет, понял, что нужно использовать функцию .show / .hide, но как мне сделать, чтобы после исчезновения, при повторном нажатие появились вновь картинки)

Мб будет не трудно помочь, само задание:

Само задание:
Нажимаем на лампу -> горит свет и видно "мага и шляпу"
По нажатию на мага "он произносит заклинание" и оттуда летит птичка, ещё раз жмем на мага, птичка залетает в шляпу и из шляпы появляется заяц)
По нажатию на лампу тухнит свет и ничего не видно)
Хелп, мужики

Я что-то типо такого придумал:

<script>
	$("#robot").hide()
$('#clickme').click(function(){
  $("#robot").show('slow')
});
</script>

Но как сделать, чтобы по нажатию все пропадало и тухнул свет, я хызы и как реализовать появление света)

Сделайте макет сцены.

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js">
  
  </script>
  <style type="text/css">
  

  </style>
</head>
<body bgcolor="white">
<div align="center" id="clickme">
  <img width="150" height="150" src="img/s.png">
</div>
<div align="center">
<img align="center" id="mag" width="150" height="150" src="img/v.png">
<img align="center" id="cilindr" width="150" height="150" src="img/c.png">
</div>


<script>
	$("#mag").hide()
	$("#cilindr").hide()
$('#clickme').click(function(){
  $("#mag").fadeToggle("slow");
  $("#cilindr").fadeToggle("slow");
});
</script>
</body>
</html>

Я пока не могу понять, как их стянуть вниз, css тоже хромает, но пытаюсь гуглить, но все тщетно, не могли бы знатоки помочь, пожалуйста?
Просто сынишка попросил помочь, а отказать ему я не могу, пытаюсь всеми силами помочь)

Волшебный у вас макет...

Цитата:

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

Я пока не могу понять, как их стянуть вниз, css тоже хромает,

position: absolute;
top: значение
left: значение

Цитата:

Сообщение от Nexus (Сообщение 498986)

Волшебный у вас макет...

Почему?

Цитата:

Сообщение от j0hnik (Сообщение 498987)

position: absolute;
top: значение
left: значение

Спасибо очень помог!

Ребят, может кто-то подскажет, как сделать появление "СВЕТА" такого?

Цитата:

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

Ребят, может кто-то подскажет, как сделать появление "СВЕТА" такого?

<style>
  #triangle-up {
  width: 50px;
	border-bottom: 100px solid yellow;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	height: 0;
	opacity: .5;
}
  </style>

<div id="triangle-up"></div>

opacity - прозрачность

https://jsfiddle.net/6rqhav3u/5/

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="scene">
	<div class="toggler">
		<img alt="Lamp" class="lamp"/>
	</div>
	<div class="main-objects">
		<div class="lamp-light">
			<div class="witch-box">
				<img alt="Witch" class="witch"/>
			</div>
			<div class="hat-box">
				<img alt="Hat" class="hat"/>
				<img alt="Bird" class="bird"/>
			</div>
		</div>
	</div>
</div>
<style>
body{
	background:#000;
}

.scene{
	position:relative;
	text-align:center;
	color:#FFF;
}

.hat-box{
	position:relative;
}

.hat{
	position:relative;
	z-index:2;
}

.bird{
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin:auto;
	transition:top ease 1s;
}

.bird.fly-out{
	top:-60px;
}

.lamp-light{
	display:flex;
	align-items:center;
	max-width:400px;
	margin:200px auto 0;
}

.lamp-light>*{
	flex-basis:50%;
	opacity:0.5;
}

.lamp-light:before{
	content:'';
	position:absolute;
	margin:auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
	border:solid 295px transparent;
	border-bottom:solid 350px #FF9;
	border-top:none;
}
.witch{
	position:relative;
	z-index:2;
}




/* stubs */
.lamp{
	position:relative;
	z-index:2;
	background:#00F;
	height:60px;
	width:60px;
	display:inline-block;
}

.witch{
	background:#F90;
	display:inline-block;
	width:90px;
	height:150px;
}

.hat{
	width:90px;
	height:90px;
	display:inline-block;
	background:#0F0;
}

.bird{
	display:inline-block;
	background:#F00;
	width:40px;
	height:40px;
}
</style>
<script>
(function($scene){
	$scene.find('.toggler .lamp').click(function(){
		$scene.find('.main-objects').toggle();
	}).end().find('.witch').click(function(){
		$scene.find('.bird').toggleClass('fly-out');
	});
})($('.scene'));
</script>

upd. не могу свет победить, так что допиливайте сами.