Исчезание изображения через определенное время

Question

Я хочу, чтобы моя страница открывалась с изображением, и я хочу, чтобы оно исчезало через 10 секунд. Каким способом я могу это сделать лучше всего? Есть ли способ сделать это с помощью Css3?

Answer 1

Пока вы дали элементу затухание id (или есть какой-то способ ссылаться на него из JavaScript):

window.setTimeout(
    function(){
        $('#pictureID').fadeOut('slow');
    },10000);

JS Fiddle demo .

Я предполагаю, что вы используете изображение в качестве заставки, в некотором роде? Если это так, то вы можете использовать position: absolute, чтобы расположить это изображение поверх содержимого страницы, а затем исчезнуть, чтобы раскрыть содержимое ниже ( JS Fiddle demo ).

Если, однако, вы также хотите, чтобы пользователь мог hover над изображением удерживать его на месте, можно использовать следующее (выше, но с несколькими изменениями):

var fadeAnim = window.setTimeout(
    function(){
        $('#i').fadeOut('slow');
    },10000);

$('#i').hover(
    function(){
        window.clearTimeout(fadeAnim);
    },
    function(){
        $(this).fadeOut(500);
    });

Демонстрация JS Fiddle .

Ссылки:

• JavaScript (из ресурса JavaScript Mozilla Developer Network ):
  • window.setTimeout().
  • window.clearTimeout().
• jQuery (из jQuery API ):
  • fadeOut().

Answer 2

setTimeout(function() {
    $('.imgClass').fadeOut('slow')
}, 10000);

Answer 3

Вы можете использовать setTimeout(), чтобы задержать начало исчезновения, а затем вы можете уменьшить его, используя jquery (или другую библиотеку javascript, такую ​​как mootools), или вы можете добавить класс к элементу и сделать его переход с помощью переход css3. Поскольку версия jQuery уже опубликована, я опубликую версию css3. http://jsfiddle.net/Tentonaxe/3Vnt7/

CSS:

#demo {
    transition: opacity 2s ease-in;
    -moz-transition:opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -webkit-transition: opacity 2s ease-in;
    border: 4px solid green;
    background-color: #ededed;
    width: 75px;
    height: 75px;

}
.hidden {
    opacity: 0.0;   
}

HTML:

<div id="demo"></div>

Javascript:

setTimeout(function(){
   document.getElementById('demo').className = "hidden"; 
},10000);

Answer 4

Вы должны будете использовать Javascript для этого.Вы можете скрестить Javascript (наш jQuery) с CSS3, но для кросс-браузерной проблемы лучше сделать это полностью в jquery.Для этого вы можете использовать load (), delay () и fadeOut ().

Try:

$('#yourImg').ready(function(){
$(this).delay(10000).fadeOut();
});