Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.01.2015, 18:25
Интересующийся
Отправить личное сообщение для Rom@n Посмотреть профиль Найти все сообщения от Rom@n
 
Регистрация: 29.01.2015
Сообщений: 10

Cимвольная анимация
Всем Привет !
Такая задачка, есть "символьная строка", написал код, что бы при заходе на сайт она опускалась сверху в низ по вертикали на 300px.
Такой вопрос: Как после этой не сложной операции, сделать так, чтобы эта "символьная строка" исчезла(удалилась) и скажем через 4 секунды моя функция выполнилась заново ?

Код прилагаю:
(function() {

var delay = 100,
i = 0,
startTimer = function (){

//console.log('функция startTimer сработала')

var elem = document.getElementById('zaglav'),
bottom = elem.offsetTop;

if (i<10) {
setTimeout(startTimer, delay);

elem.style.top = bottom + 10 + 'px';
}

i++;

};

var timer = setTimeout(startTimer, delay);

//alert('Алерт !!!');

})();
Ответить с цитированием
  #2 (permalink)  
Старый 29.01.2015, 19:26
Интересующийся
Отправить личное сообщение для Rom@n Посмотреть профиль Найти все сообщения от Rom@n
 
Регистрация: 29.01.2015
Сообщений: 10

Все решили !!! Кому интересно
(function() {

var delay = 100,
i = 0,
startTimer = function (){

//console.log('функция startTimer сработала')

var elem = document.getElementById('zaglav'),
bottom = elem.offsetTop;

if (i<10) {
//console.log('функция startTimer '+(i+1)+' сработала')
setTimeout(startTimer, delay);

elem.style.top = bottom + 10 + 'px';
}else{
function pause(ms)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < ms);
};
pause(2000)
elem.parentNode.removeChild(elem);
}

i++;

};

var timer = setTimeout(startTimer, delay);

})();
Ответить с цитированием
  #3 (permalink)  
Старый 29.01.2015, 19:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Сообщение от Rom@n
do { curDate = new Date(); }
while(curDate-date < ms);
};
pause(2000)
тупим комп на две секунды ...
Ответить с цитированием
  #4 (permalink)  
Старый 29.01.2015, 22:21
Интересующийся
Отправить личное сообщение для Rom@n Посмотреть профиль Найти все сообщения от Rom@n
 
Регистрация: 29.01.2015
Сообщений: 10

Есть другие варианты ??
Ответить с цитированием
  #5 (permalink)  
Старый 29.01.2015, 22:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Rom@n,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  <!--

  -->
  </style>
</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> (function() {

var element = document.getElementById("im");
function animate(el,from, to, style, time, complete) {
  var last = +new Date(),
      tick = function() {
    from += (new Date() - last)*to / time ;
    last = +new Date();
    if (from < to) {
      (window.requestAnimationFrame && requestAnimationFrame(tick))|| setTimeout(tick, 16);
    }
    else {from = to};
    el.style[style] = from + "px" ;
    from == to  &&  complete()
  };
 tick()
 }
function first()
{  element.style.display = '';
   animate(element, 0, 300,"top", 1500, pause);
}

function pause()
{  element.style.display = 'none';
   setTimeout(first, 4000);
}
first()
})();
</script>
</body>

</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Анимация gif картинки при нажатии на ссылку ainur777 Общие вопросы Javascript 2 06.07.2014 16:23
Не загружается анимация при табах pelmeshka (X)HTML/CSS 0 05.03.2014 21:40
Не работает анимация при загрузки ajax ArtOs Общие вопросы Javascript 0 24.05.2012 17:52
Анимация. Помогите понять почему не работает. kadurban jQuery 4 08.07.2010 20:50
Цикличность анимация? SashaBorandi jQuery 1 25.12.2008 09:20