Скрыть изображение через 10 секунд

Есть ли способ использовать HTML и CSS, я могу скрыть изображение через 10 секунд? Если это невозможно, есть ли простой способ сделать это с помощью только JavaScipt (не jQuery, я не хочу добавлять jQuery-библиотеку на мою HTML-страницу, если это не требуется).Скрыть изображение через 10 секунд

источник

2013-06-05 Kerry

Что на самом деле вы не можете получить? Как сделать что-то через 10 секунд или как удалить узел из DOM? Я уверен, что обе эти задачи легко доступны для google – zerkms

Чтобы скрыть мгновенно -

setTimeout(function() { 
    document.getElementById('imageID').style.display='none' 
}, 10*1000);

EDIT: - Для анимации скрытие с использованием чистого JS

function start(){ 

window.timerID = setInterval(function() { 
var aOpaque = document.getElementById('imageID').style.opacity; 
aOpaque = aOpaque-.1; 

aOpaque = aOpaque.toFixed(1); 

document.getElementById('imageID').style.opacity = aOpaque; 

if(document.getElementById('imageID').style.opacity<=0) 
clearInterval(window.timerID); 
},1000); 
} 

window.onload = function(){start();}

В разметке <image id="imageID" style="opacity:1"> забудьте дать style="opacity:1" встроенный CSS атрибут ,

Пожалуйста, обратите внимание, что <img> имеет alt атрибут, который может повлиять на результаты поиска на странице и делать display:none может негативно повлиять на результаты поиска, так что разработчики используют что-то вроде - transform: translateX(); и просто поставить HTML тег из поля зрения говорят по давая отрицательное значение в translateX(value).

источник

2013-06-05 04:54:58

есть ли способ медленно скрыть? поскольку он скрывается в мгновение ока. – Kerry

plz см. Редактировать, это работает без 'css3' –

добавление' toFixed' –

Использование setTimeOut() для этого

SetTimeout() - выполняет функцию, когда, после ожидания заданного количества миллисекунд

setTimeout(function(){HIDE HERE)},10000);

источник

2013-06-05 04:47:29 PSR

Есть ли способ скрыть изображение? в настоящее время его скрывают в мгновение ока. – Kerry

можно с jQuery – PSR

можно без jQuery – Ian

Вы можете использовать CSS3 и @keyframes. Установите ключевой кадр и сделайте его прозрачным после долгого времени. Вот больше информации. About Keyframes

источник

2013-06-05 04:50:39 ValleyDigital

Я не вижу использование ключевых кадров css3 здесь –

. Первоначальный вопрос состоял в том, мог ли он использовать html и css, поэтому я дал ответ, который мог бы работать с css3. setTimeout() тоже будет работать, но остальные люди уже дали этот ответ. – ValleyDigital

Конечно, вы правы @DeveloperLooper, но я волнуюсь, что CSS3 может не поддерживать IE и другие браузеры более старой версии. – Kerry

<script type = "text/javascript"> 
window.onload=function(){setTimeout(showPopup,10000)}; 

function showPopup() 
{ 
    //write functionality for the code here 
} 
</script>

В данном случае способ showPopup называется 10000 миллисекунд или 10 секунд после того, как document загружен.

Для достижения fading out в чистом JavaScript код становится немного более сложным. См. Ниже отредактированный ответ. Это не совсем мой код, но я не помню, откуда у меня это было.

<!doctype html> 
<html> 
<head> 
<script type = "text/javascript"> 
var fading_div = document.getElementById('fading_div'); 
var animationComplete = true; 
window.onload=function(){setTimeout(hideImage,10000)}; 

function hideImage() 
{ 
    if (animationComplete && fading_div.style.opacity !== '0') { 
     animationComplete = false; 
     for (var i = 1; i <= 100; i++) { 
      setTimeout((function (x) { 
       return function() { 
        function_fade_out(x) 
       }; 
      })(100 - i), i * 10); 
     } 
    } 
} 

function function_opacity(opacity_value) 
{ 
    fading_div.style.opacity = opacity_value/100; 
    fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')'; 
} 

function function_fade_out(opacity_value) 
{ 
    function_opacity(opacity_value); 
    if (opacity_value == 1) { 
     fading_div.style.display = 'none'; 
     animationComplete = true; 
    } 
} 
</script> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
<img id="fading_div" src="test_image.jpg"/> 
</body> 
</html>

источник

2013-06-05 04:50:51

Вы ничего не говорите о CSS2 или CSS3, но посмотрите на это ... Может быть, это может помочь вам в пути?

Demo on JsFiddle

источник

2013-06-05 05:18:27 Uffe

Попробуйте

setTimeout(function() { 
    document.getElementById('//your image id').style.display='none' 
}, 10000);

источник

2013-06-05 05:58:09 edd

Скрыть изображение через 10 секунд

ответ

Смежные вопросы