ФорумПрограммированиеПыхнуть хотите?Готовые решения → Плавное изменение прозрачности элемента

Плавное изменение прозрачности элемента

  • vasa_c

    Сообщения: 3131 Репутация: N Группа: в ухо

    Spritz 21 ноября 2007 г. 18:51


    /**
    * Запуск плавного изменение прозрачности элемента
    *
    * @param mixed node - целевой DOM-элемент или его ID
    * @param int start - начальное значение прозрачности. От 0 (полностью прозрачный) до 100 (непрозрачный)
    * @param int stop - окончательное значение
    * @param int time - [optional] время изменения в мс. По умолчанию 1 000 (1 секунда)
    * @param int tStep - [optional] интервал одного шага в мс. По умолчанию 100
    * @param function handler - [optional] обработчик завершения процедуры
    * @return int идентификатор, который можно использовать в clearInterval() для принудительного завершения
    */
    function opacityOut(node, start, stop, time, tStep, handler)
    {
    if (typeof(node) != "object") {
    node = document.getElementById(node);
    }
    time = time ? time : 1000;
    tStep = tStep ? tStep : 100;
    var sop = (stop - start) * tStep / time;
    var op = start - sop;
    function step()
    {
    op += sop;
    if (((sop > 0) && (op > stop)) || ((sop < 0) && (op < stop))) {
    op = stop;
    clearInterval(timer);
    if (handler) {
    setTimeout(handler, 0);
    }
    }
    var iop = Math.round(op);
    node.style.opacity = iop / 100;
    node.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + iop + ")";
    return true;
    }
    step();
    var timer = setInterval(step, tStep);

    return timer;
    }


    Примеры:

    /* Изменяем прозрачность элемент с ID="q" от 100% до 10% за 3 секунды */
    opacityOut("q", 100, 10, 3000);

    /* Гоняем по кругу элемент с ID="w" */
    var wTimer;
    function wDown()
    {
    wTimer = opacityOut("w", 100, 0, 1000, 100, wUp);
    }

    function wUp()
    {
    wTimer = opacityOut("w", 0, 100, 1000, 100, wDown);
    }
    wDown();


    Остановить последнее безобразие можно щелчком по ссылке:

    <a href="#" onclick="clearInterval(wTimer);return false;">stop W</a>
  • md5

    Сообщения: 11960 Репутация: N Группа: в ухо

    Spritz 21 ноября 2007 г. 21:04, спустя 2 часа 12 минут 26 секунд

    спасибо ;)
    все умрут, а я изумруд
  • adw0rd

    Сообщения: 22959 Репутация: N Группа: в ухо

    Spritz 14 января 2008 г. 3:24, спустя 53 дня 6 часов 20 минут

    http://xhtml.ru/2006/11/02/fade-in-effect-opacity/
    https://smappi.org/ - платформа по созданию API на все случаи жизни

Пожалуйста, авторизуйтесь, чтобы написать комментарий!