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">

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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