3

Сделала анимацию: привидение появляется и исчезает. Причем время его присутствия меньше, чем отсутствия, чего я и добивалась.

Но время присутствия не поддается регулированию, а, такое впечатление, что зависит от времени всего интервала t

var t = setInterval(function appear(){
    var ghost = document.getElementById("ghost");
    if (ghost.style.display == "none")
            {ghost.style.display = "block";}
    else
            {var t1 = setTimeout(function disappear(){
            ghost.style.display = "none";
            }, 1)}      
}, 6000)

Исчезнуть оно должно по функции t1. Хочется сделать еще меньше. Задержка t1 урезана до 1 мс, но никакой реакции. Отчего это?

var t = setInterval(function appear() {
  var ghost = document.getElementById("ghost");
  if (ghost.style.display == "none") {
    ghost.style.display = "block";
  } else {
    var t1 = setTimeout(function disappear() {
      ghost.style.display = "none";
    }, 1)
  }
}, 6000)
body {
  background: black url(https://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
}

#ghost {
  position: absolute;
  left: 25%;
  display: none;
}
<img id="ghost" src="https://i.stack.imgur.com/nrYtc.png" width="280">

2 ответа 2

3

Проблема Вашего кода в том, что ожидание disappear вы пишете в ветке else.
Это значит, что у этой ветки нет шансов выполниться на текущей итерации setInterval.

Чтобы контроллировать время исчезновения, нужно выставлять setTimeout непосредственно после отображения.

Вторая проблема в проверке:

ghost.style.display == "none"

Это не работает для стилей, полученных через каскадные таблицы (т.е. если стиль указан не для самого элемента, а каким-то образом в css).
Можно либо вручную инициализировать стиль элемента, либо использовать getComputedStyle чтобы получить актуальные стили элемента после применения css.

var ghost = document.getElementById("ghost");
ghost.style.display = "none";

var t = setInterval(function appear() {
  if (ghost.style.display == "none") {
    ghost.style.display = "block";
    // Просто убираем else
    setTimeout(function () {
      ghost.style.display = "none";
    }, 300)
  }
}, 3000)
body {
  background: black url(https://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
}

#ghost {
  position: absolute;
  left: 25%;
  display: none;
}
<img id="ghost" src="https://i.stack.imgur.com/nrYtc.png" width="280">

2

Так Вы можете менять промежутки времени видимой/невидимой картинки, изменяя значения переменных showSeconds и hideSeconds.

var hideSeconds = 3;
var showSeconds = 1;
function switchGhost(show) {
  var ghost = document.getElementById("ghost");
  if (show) {
    ghost.style.display = "block";
    setTimeout(switchGhost, showSeconds * 1000, !show);
  } else {
    ghost.style.display = "none";
    setTimeout(switchGhost, hideSeconds * 1000, !show);
  }
}

switchGhost(false);
body {
  background: black url(https://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
}

#ghost {
  position: absolute;
  left: 25%;
  display: none;
}
<img id="ghost" src="https://i.stack.imgur.com/nrYtc.png" width="280">

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.