Блог

Главная - Вопросы по программированию - Задержка и исчезновение текста с помощью Javascript?

Задержка и исчезновение текста с помощью Javascript?

#javascript #delay #fadein #fade

#javascript #задержка #исчезающий #исчезновение

Вопрос:

На моей странице есть строка, которую я хочу отложить на 2 секунды и затемнить. Есть ли способ сделать это без jQuery?

Сайт является http://theclockpage.com И текст — это маленькая строка под часами, текст получен с помощью javascript, поэтому я не добавляю его в вопрос.

Спасибо

Ответ №1:

 var textCont = document.getElementById('clock').nextSibling;
textCont.style.opacity = 0;

setTimeout(function() {
    var opacity = 0,
        animate = setInterval(function() {

            opacity  = 0.05;

            if (opacity >= 1) {
                clearInterval(animate);
            }

            textCont.style.opacity = opacity;

        }, 10);
}, 2000);

jsFiddle.

Комментарии:

1. Эта функция не работает. Это не приведет к правильному преобразованию строки в добавляемое целое число. textCont.style.opacity = ‘0’; и textCont.style.opacity = parseInt(textCont.style.opacity) 0.05 «; будут работать.

2. @Greg Тогда jsFiddle, должно быть, делает что-то забавное: P

3. Скорее всего, ваш браузер не делал ничего смешного. В Google Chrome и webkit стили CSS являются строками и должны использоваться как строки.

4. @Greg Они точно есть. Но я никогда не считываю opacity свойство обратно из style объекта.

5. Да, вы делаете. непрозрачность = 0.05; Вы также пытаетесь сравнить строку с целым числом: непрозрачность >= 1.

Ответ №2:

     var d = document.getElementById("box");

    function fadeOut(fadeScaler, hertz) {
        if (!this instanceof Element) return false;
        hertz = (!hertz) ? 60 : hertz; // Approx 60 hertz refresh rate

        var opacity = this.style.opacity
            opacity = "0";

        var t = setInterval(
           function() {
             opacity = parseInt(opacity)   fadeScaler   '';

             if (parseInt(opacity) >= 1) 
               clearInterval(t);
           },
           Math.floor(1000 / hertz)); // 1000 miliseconds / hertz = refresh rate
    };

fadeOut.apply(d, [.05]);

Если я использую это, функция Алекса не будет работать. Непрозрачность — это строка и не может быть =’d с целым числом.

Комментарии:

1. @alex В этом проблема. непрозрачность — это строка. В любом случае, в CSS и webkit эта функция является кроссбраузерной.

2.@Greg Я установил это как Number 0 . Я никогда не читаю opacity свойство, просто устанавливаю его.

3. непрозрачность = 0.05; // Это считывание свойства opacity. Это всего лишь сокращенная форма для непрозрачности = opacity 0.05, фактически это не измененный код.

4. @Greg Нет, это чтение opacity переменной. Вы видите with (textCont.style) { ... } где-нибудь?

5. Лол, я делал, пока вы не отредактировали свой вопрос ровно через 1 минуту после того, как я опубликовал свой ответ.