Плавно выезжающий блок (без jquery и прочих библиотек)
Приветствую Вас, друзья.
У меня никогда не получалось реализовать выплывающий блок, точнее получается, но только он выезжает не плавно, дергается, я не знаю, может быть, я делаю что-то не так. Вот собственно мой код:
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 не нужен? Если нужен дайте знать. |
zhurchik, давай сразу весь пример на jsFiddle
|
d.skuratovich,
http://jsfiddle.net/fNPvf/11591/ |
zhurchik, в общем: ты добьешься максимального эффекта если сделаешь шаг движения минимальным на сколько это возможно, а скорость самой высокой
|
d.skuratovich,
Разве разрешено задавать скорость в setInterval "10" или вообще "1"? |
setInterval ущербен в анимациях. Вот нормальный пример http://jsfiddle.net/rs24jv0k/
Только позиция должна не каждый раз по пикселю меняться, а вычисляться исходя из пройденного времени с момента начала анимации, и по завершению анимации перестать запрашивать новый кадр. |
|
Цитата:
В реале надо подключить полифилл. Внутри него ничего необычного нет - все тот же древний setInterval для древних браузеров, плюс избавление от префиксов для не очень старых. |
danik.js,
Спасибо. А я совсем и забыл о рекурсии |
:)
<!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>
|
| Часовой пояс GMT +3, время: 18:54. |