Как вы заставляете что-то медленно появляться на странице, используя Javascript?

Question

Есть ли более простой способ заставить что-то медленно появляться на веб-странице? Я пытался постепенно увеличивать непрозрачность CSS, но его (непрозрачность) тег отличается для каждого браузера Хорошо ли известна функция Javascript, которую используют все? Или есть какой-нибудь тэг css?

[править] Спасибо за предложение Jquery. Есть ли другой вариант? Моя страница очень маленькая и я не хочу добавлять Jquery. (Я знаю о Google хостинге)

Answer 1

Aargh! Каждый разработчик JS здесь, похоже, заразился jqueryitis!
Если вы еще не заражены или все еще хотите выйти из него, вот небольшая функция, выполняющая работу через браузер:)

function appear(elm, i, step, speed){
    var t_o;
    //initial opacity
    i = i || 0;
    //opacity increment
    step = step || 5;
    //time waited between two opacity increments in msec
    speed = speed || 50; 

    t_o = setInterval(function(){
        //get opacity in decimals
        var opacity = i / 100;
        //set the next opacity step
        i = i + step; 
        if(opacity > 1 || opacity < 0){
            clearInterval(t_o);
            //if 1-opaque or 0-transparent, stop
            return; 
        }
        //modern browsers
        elm.style.opacity = opacity;
        //older IE
        elm.style.filter = 'alpha(opacity=' + opacity*100 + ')';
    }, speed);
}

Появиться

appear(document.getElementsByTagName('DIV')[0], 0, 5, 40);

Исчезнуть

appear(document.getElementsByTagName('DIV')[0], 100, -5, 40);

Answer 2

Легко с Jquery:

$("#myElementID").fadeIn("slow");

Answer 3

Дорогой Господь! Да, я думаю, что большинство из нас знает о jQuery, спасибо.

Непрозрачность не , поэтому сложно установить, сегодня; теперь только IE нуждается в особой помощи. См. этот ответ для простого простого не зависящего от времени кода затухания в обычном JavaScript.

Answer 4

YUI Также имеет функцию анимации и позволяет включать только необходимые модули, которые уменьшат время загрузки.

Анимация YUI

Answer 5

Если вы можете использовать jQuery, то функция animate() поможет вам.

$('your_selector').animate({opacity: 0.25}, 5000, function() {
    // Animation complete.
});

См. .animate ()

или вы можете использовать fadeIn

$('your_selector').fadeIn('slow', function() {
        // Animation complete
      });

Answer 6

Вы fadein и fadeout из jQuery. Например, jQuery('#ID').fadeout() сделает элемент с идентификатором 'ID' исчезающим (медленно исчезающим),

Answer 7

Вы также можете использовать slideDown.

$("#YourID").slideDown("slow");

Answer 8

Я рекомендую использовать jQuery. Вам придется использовать функцию fadeIn (). Подробное объяснение здесь: http://api.jquery.com/fadeIn/. Я редко использую чистый Javascript после запуска с библиотекой jQuery.