Сделайте так, чтобы div постепенно исчезал через определенное время - PullRequest
Новая
       14

Сделайте так, чтобы div постепенно исчезал через определенное время

5 голосов
/ 24 сентября 2008

Каков наилучший способ заставить <div> исчезнуть через определенное время (без использования некоторых доступных библиотек JavaScript).

Я ищу очень легкое решение, не требующее отправки огромной библиотеки JavaScript в браузер.

Ответы [ 6 ]

12 голосов
/ 24 сентября 2008

Не знаю, почему вы были бы против использования чего-то вроде jQuery, что сделало бы достижение этого эффекта почти тривиальным, но, по сути, вам нужно обернуть ряд изменений в -moz-opacity, opacity и filter: Альфа CSS правила в setTimeout ().

Или используйте jQuery и оберните вызов fadeOut () в setTimeout. Ваш выбор.

4 голосов
/ 24 сентября 2008

Вот какой-то javascript, который делает это. Я нашел его на веб-сайте учебника по JavaScript (который я не смог найти снова) и изменил его. 

var TimeToFade = 200.0;

function fade(eid)
{
    var element = document.getElementById(eid);
    if(element == null) return;

    if(element.FadeState == null)
    {
        if(element.style.opacity == null || element.style.opacity == ''
               || element.style.opacity == '1') {
            element.FadeState = 2;
        } else {
            element.FadeState = -2;
        }
    }

    if(element.FadeState == 1 || element.FadeState == -1) {
        element.FadeState = element.FadeState == 1 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
    } else {
        element.FadeState = element.FadeState == 2 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade;
        setTimeout("animateFade(" + new Date().getTime()
           + ",'" + eid + "')", 33);
    }
}

function animateFade(lastTick, eid)
{
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var element = document.getElementById(eid);

    if(element.FadeTimeLeft <= elapsedTicks) {
        element.style.opacity = element.FadeState == 1 ? '1' : '0';
        element.style.filter = 'alpha(opacity = '
            + (element.FadeState == 1 ? '100' : '0') + ')';
        element.FadeState = element.FadeState == 1 ? 2 : -2;
        element.style.display = "none";
        return;
    }

    element.FadeTimeLeft -= elapsedTicks;
    var newOpVal = element.FadeTimeLeft/TimeToFade;
    if(element.FadeState == 1) {
        newOpVal = 1 - newOpVal;
    }

    element.style.opacity = newOpVal;
    element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';

    setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}

Следующий html показывает, как это работает: 

<html><head>
    <script type="text/javascript" src="fade.js"></script>
</head><body>
    <div id="fademe" onclick="fade( 'fademe' )">
        <p>This will fade when you click it</p>
    </div>
</body></html>
2 голосов
/ 24 сентября 2008

В наши дни я всегда использовал бы для этого библиотеку - прогресс, который они сделали, был феноменальным, и только кросс-браузерная функциональность того стоит. Так что этот ответ не является ответом. Я просто хотел бы отметить, что jQuery занимает всего 15 КБ.

0 голосов
/ 24 сентября 2008

Попробуйте библиотеку анимации YUI (пользовательский интерфейс Yahoo): http://developer.yahoo.com/yui/animation/

Не изобретай велосипед. Библиотеки - наши друзья. : -)

0 голосов
/ 24 сентября 2008

Используйте setTimeout с начальным временем для запуска процедуры затухания, а затем используйте setTimeout с малым таймером, чтобы пройти уровень непрозрачности изображения, пока оно не исчезнет.

Тем не менее, jQuery может уменьшиться до 15 КБ и является единовременной загрузкой для клиента, поэтому я бы не назвал его огромным.

0 голосов
/ 24 сентября 2008

Я знаю, что у вас не хватает библиотек, но я бы порекомендовал взглянуть на moo.fx: http://moofx.mad4milk.net/ - я думаю, что это как 3k.

jQuery тоже чертовски мал.

...