Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.11.2018, 22:59
Новичок на форуме
Отправить личное сообщение для notOldFagFromRussia Посмотреть профиль Найти все сообщения от notOldFagFromRussia
 
Регистрация: 08.11.2018
Сообщений: 3

Как сделать плавное проявление картинки?
Здравствуйте.

Есть картинка:

<img id="result_pic_six" src="img/hulk_main.jpg" width=100% alt="A">


Картинка появляется если набрать определенное кол-во очков.
Но проявление резкое и смотрится не очень.

Пробовал через opacity и transition но не работает.

Скорее всего из-за этого куска кода.

var hero_six = document.getElementById('result_pic_six');
hero_six.style.display="block";


Код:
#result_pic_six
    display: none
Как я это понимаю - из-за того что стоит display="block" - картинка появляется сразу же, без всяких задержек.

При этом удалить их нельзя, они необходимы, чтобы код работал.

Как решить проблему?
Ответить с цитированием
  #2 (permalink)  
Старый 15.11.2018, 23:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

notOldFagFromRussia,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   #result_pic_six {
      display: none;
      opacity: 0;
      transition: 2s;
   }
  </style>
</head>

<body>
<img id="result_pic_six" src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width=100% alt="A">
 <script>

var hero_six = document.getElementById('result_pic_six');
hero_six.style.display="block";
window.setTimeout(function() {
hero_six.style.opacity="1";

},0)

 </script>

</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать чтобы в popup окне показывалось картинка? sarik Общие вопросы Javascript 31 15.03.2013 13:12
как сделать, чтобы в диве менялись картинки, а не в документе? byMary Общие вопросы Javascript 3 06.08.2012 21:05
30(1|2) редирект от сервера. Или как лучше сделать редирект при верной отсылке форма. pizzZ AJAX и COMET 2 18.02.2010 09:06
Как сделать плавное изменение размеров контейнеров при смене AJAX-содержимого Nominus umbra Общие вопросы Javascript 3 27.01.2010 13:32
Как сделать смену картинки, типа "до" и "после", без перезагрузки страницы? btstudio Events/DOM/Window 2 23.02.2009 20:43