Вход

Просмотр полной версии : Скрытие/Отображение элементов с интервалом

DenMohinator
03.06.2017, 20:28
Доброго времени суток!
Нужна помощь умных людей в решении сложного (для меня) задания.
Нужно добавить два рисунка, невидимые при загрузке страницы, и две кнопки. При нажатии на одну кнопку должно в цикле срабатывать проявление первой картинки и исчезновение второй картинки со скоростью 2000, а затем наоборот, при нажатии на вторую кнопку обе картинки должны появиться и прекратить мигание.
Я поискал в инете и нашел нужные мне данные, вот только моих знаний не хватает чтобы слепить из этого нормальный код.
Пожалуйста помогите.
рони
03.06.2017, 20:48
DenMohinator,
html и css хотя бы сделайте, так больше шансов, что вам ответят.
рони
03.06.2017, 20:48
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:


... ваш код...



О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
j0hnik
03.06.2017, 21:20
Интересная фантазия, с каждым днем мне все больше нравится этот форум. :victory:
рони
03.06.2017, 21:27
DenMohinator,

<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body .tkl{
display: none;
transition: all .8s linear;
transform: scale(0);
}
body.open .tkl{
display: inline-block;
}
body.open .tkl.show{
transform: scale(1);
}
</style>
</head>

<body>
<img src="http://www.infoportal.pp.ua/_ph/13/2/706430891.jpg" alt="" class="tkl">
<img src="http://www.euflora.eu/i/gallery/14102.jpg" alt="" class="tkl">
<input id="aaa" name="" type="button" value="show" onclick="show()">
<input id="bbb" name="" type="button" value="go" onclick="go()">
<script>
var timer, show;

function blinker(cls, duration, sel) {
var elems = [].slice.call(document.querySelectorAll(sel));
show = function() {
document.body.classList.add("open");
window.clearTimeout(timer);
elems[0].classList.add(cls);
elems[1].classList.add(cls)
};
return function() {
show();
(function mig(a) {
elems.reverse();
elems[0].classList.add(cls);
elems[1].classList.remove(cls);
timer = window.setTimeout(mig, duration)
})()
}
}
var go = blinker("show", 2000, ".tkl");

</script>

</body>

</html>
j0hnik
03.06.2017, 21:32
Зачетно получилось :yes:, картинки в тему:yes:
DenMohinator
03.06.2017, 21:42
Спасибо! Ты мне жизнь спас!