JavaScript, отображающий графическое сообщение

Question

Я хочу отобразить изображение Happy Holidays вместе с сообщением на моей домашней странице, когда пользователь заходит на страницу, и оно должно исчезнуть через несколько секунд.Я думаю, что я должен сделать это в javascript или jquery, но я не знаю, как это сделать.Есть ли примеры / учебники для этого.

Я знаю, что есть некоторые плагины jquery, такие как лайтбокс, теневой ящик и т. Д., Но я не знаю, как их активировать при загрузке страницы, так что я думаю, что она что-то имеетделать с JavaScript.

Answer 1

Для изображения типа

<img src="x.png" alt="My Image" id="MyImage" />

Приведенный ниже javascript библиотеки jQuery затухает через 5 секунд

setTimeout(function()
{
    $("#MyImage").fadeOut('fast');
}, 5000);

См. http://www.w3schools.com/jsref/met_win_settimeout.asp и http://api.jquery.com/fadeOut/

Answer 2

поскольку вы использовали в вопросе теги html5 и css, вы можете добиться этого эффекта с помощью простой анимации css3 (другие префиксы для краткости опущены)

#myimage {
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-delay: 5s;
    -webkit-animation-iteration-count: 1;
}


@-webkit-keyframes fadein {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

в противном случае вы можете использовать переход

#myimage {
    opacity: 1;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease;
    -webkit-transition-delay: 5s;
}

#myimage.classAppliedOnDomReadyViaJavascript {
   opacity: 0;
}

применение определенного класса к событию dom ready, чтобы переход мог начаться в заданное время

Answer 3

JS:

setTimeout(function() {
    var image = document.getElementById('hh'),
        step = 0.01,
        opacity = 1,
        interval = setInterval(function() {
           opacity = opacity - step;
           if (opacity < 0) {
                image.style.opacity = 0;
                clearInterval(interval);
                return false;
           }
           image.style.opacity = opacity;
        }, 1);
}, 5000);

HTML:

<img id="hh" src="http://goo.gl/qEH6i" alt="" />

Answer 4

$(document).ready(function(){
     setTimeout("$('#xmasdiv').fadeTo(300,0.0);",5000); 
     // change the 5000 to however many miliseconds you want delay,
     // and the 300 to whatever speed of transition you wish to.
     // And of course #xmasdiv should refer to the right DIV
     // (like <div id="xmasdiv">[xmas content]</div>)
});

Да, это помогает.

Answer 5

Используйте Jquery. См. Документацию и демонстрационный пример: http://jqueryui.com/demos/animate/. На этой странице вы найдете тонны источников, с которых можно начать.