Форум

zhurchik · #1 (**permalink**) 28.01.2015, 13:03

Приветствую Вас, друзья.

У меня никогда не получалось реализовать выплывающий блок, точнее получается, но только он выезжает не плавно, дергается, я не знаю, может быть, я делаю что-то не так.
Вот собственно мой код:

var currentPosition = parseInt(document.getElementById("im").style.top,10);//Получаем текущее положение блока, который будет выплывать

		timer = setInterval(function message()
		{
			currentPosition += 2;

			document.getElementById("im").style.top = currentPosition +"px";//Прибавляем по 2 пиксела с каждым запуском setInterval
		},50);

Что я делаю не так? В какую сторону копать?
Я поставил 2 пиксела и блок все равно подергивается, а мне нужно чтобы блок еще быстрее выплывал

Думаю код HTML не нужен? Если нужен дайте знать.

d.skuratovich · #2 (**permalink**) 28.01.2015, 13:09

zhurchik, давай сразу весь пример на jsFiddle

zhurchik · #3 (**permalink**) 28.01.2015, 13:14

d.skuratovich,
http://jsfiddle.net/fNPvf/11591/

d.skuratovich · #4 (**permalink**) 28.01.2015, 13:17

zhurchik, в общем: ты добьешься максимального эффекта если сделаешь шаг движения минимальным на сколько это возможно, а скорость самой высокой

zhurchik · #5 (**permalink**) 28.01.2015, 13:21

d.skuratovich,
Разве разрешено задавать скорость в setInterval "10" или вообще "1"?

danik.js · #6 (**permalink**) 28.01.2015, 13:37

setInterval ущербен в анимациях. Вот нормальный пример http://jsfiddle.net/rs24jv0k/

Только позиция должна не каждый раз по пикселю меняться, а вычисляться исходя из пройденного времени с момента начала анимации, и по завершению анимации перестать запрашивать новый кадр.

d.skuratovich · #7 (**permalink**) 28.01.2015, 13:40

zhurchik, да, можно. ссылка

Пример выше имеет место быть, если тебе не страшна кросс-браузерность

danik.js · #8 (**permalink**) 28.01.2015, 13:44

Сообщение от d.skuratovich

Пример выше имеет место быть, если тебе не страшна кросс-браузерность

Пример упрощен. На то он и пример )
В реале надо подключить полифилл. Внутри него ничего необычного нет - все тот же древний setInterval для древних браузеров, плюс избавление от префиксов для не очень старых.

zhurchik · #9 (**permalink**) 28.01.2015, 14:02

danik.js,
Спасибо.
А я совсем и забыл о рекурсии

рони · #10 (**permalink**) 28.01.2015, 18:51

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div id="im" style="z-index:222;position:fixed;top:-65px;left:0;
width:250px;height:65px;
color:#fff;
border:1px solid #4767AB;
text-shadow: 1px 1px 1px #000;
background:#4c83c3;box-shadow:0 0 2px rgba(0,0,0,0.9);">

		НОВОЕ СООБЩЕНИЕ<br>
		От<br>
		Пан или пропал

</div>
<script>
var element = document.getElementById("im");
function animate(el, to, time) {
  var top = el.offsetTop,
      last = +new Date(),
      tick = function() {
    top += (new Date() - last)*to / time ;
    last = +new Date();
    if (top < 500) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
    else {top = to};
    el.style.top = top + "px" ;
  };

 tick()}
animate(element, 500, 800);
</script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript