Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Скрытие/Отображение элементов с интервалом (https://javascript.ru/forum/misc/69179-skrytie-otobrazhenie-ehlementov-s-intervalom.html)

DenMohinator 03.06.2017 20:28

Скрытие/Отображение элементов с интервалом
 
Доброго времени суток!
Нужна помощь умных людей в решении сложного (для меня) задания.
Нужно добавить два рисунка, невидимые при загрузке страницы, и две кнопки. При нажатии на одну кнопку должно в цикле срабатывать проявление первой картинки и исчезновение второй картинки со скоростью 2000, а затем наоборот, при нажатии на вторую кнопку обе картинки должны появиться и прекратить мигание.
Я поискал в инете и нашел нужные мне данные, вот только моих знаний не хватает чтобы слепить из этого нормальный код.
Пожалуйста помогите.

рони 03.06.2017 20:48

DenMohinator,
html и css хотя бы сделайте, так больше шансов, что вам ответят.

рони 03.06.2017 20:48

Пожалуйста, отформатируйте свой код!

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


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

j0hnik 03.06.2017 21:20

Интересная фантазия, с каждым днем мне все больше нравится этот форум. :victory:

рони 03.06.2017 21:27

Мигалка на js
 
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

Спасибо! Ты мне жизнь спас!


Часовой пояс GMT +3, время: 16:07.