Исчезновение картинок по нажатию
Всем привет, задали мне тут одно задание, сам в 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 тоже хромает, но пытаюсь гуглить, но все тщетно, не могли бы знатоки помочь, пожалуйста?
Просто сынишка попросил помочь, а отказать ему я не могу, пытаюсь всеми силами помочь) |
Волшебный у вас макет...
|
Цитата:
top: значение left: значение |
Цитата:
|
Цитата:
Ребят, может кто-то подскажет, как сделать появление "СВЕТА" такого? |
Цитата:
<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. не могу свет победить, так что допиливайте сами. |
Часовой пояс GMT +3, время: 03:43. |