Javascript: Fade В изображениях при загрузке страницы; один за другим?

Я создал следующий код, который при загрузке страницы добавляет непрозрачность: 1 ко всем div на странице. При этом все изображения видны на pageload, но я хочу, чтобы каждый медленно исчезал, и после того, как один из них полностью загружен/виден, я хочу, чтобы второе изображение загрузилось точно так же, а затем третье.Javascript: Fade В изображениях при загрузке страницы; один за другим?

Как это сделать с помощью приведенного ниже кода; что нужно изменить/добавить? Обратите внимание, что он должен использовать чистый Javascript; ни CSS3, ни jQuery, как проприетарная структура, в которой я работаю, требуют чистого JS.

var imageOne = document.getElementById('imageOne'); 
 
var imageTwo = document.getElementById('imageTwo'); 
 
var imageThr = document.getElementById('imageThr'); 
 

 
function fadeIn() { 
 
    imageOne.style.opacity = '1'; 
 
    imageTwo.style.opacity = '1'; 
 
    imageThr.style.opacity = '1'; 
 
}

#imageOne { 
 
    background: url('https://thingiverse-production-new.s3.amazonaws.com/renders/16/04/2d/b5/ed/smiley_face_thumb_small.jpg'); 
 
    background-repeat: no-repeat; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin-right: 20px; 
 
    float: left; 
 
    opacity: 0; 
 
} 
 
#imageTwo { 
 
    background: url('http://www.mpaart.org/wp-content/uploads/2015/07/twitter-logo-round-50x50.png'); 
 
    background-repeat: no-repeat; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin-right: 20px; 
 
    float: left; 
 
    opacity: 0; 
 
} 
 
#imageThr { 
 
    background: url('http://orig08.deviantart.net/24c1/f/2009/238/d/8/small_50x50__png_clock_pic_by_counter_countdown_ip.png'); 
 
    background-repeat: no-repeat; 
 
    width: 50px; 
 
    height: 50px; 
 
    float: left; 
 
    opacity: 0; 
 
}

<body onload="fadeIn()"> 
 
    <div id="wrapper"> 
 
    <div id="imageOne"></div> 
 
    <div id="imageTwo"></div> 
 
    <div id="imageThr"></div> 
 
    </div> 
 
</body>

источник

2015-11-17 chaser7016

Как примечание для вас. Вы можете использовать jquery, если единственное, о чем вы беспокоитесь, это работа в ie 6+. https://jquery.com/browser-support/ – Spaceman

Как еще одно примечание. Вы ограничиваете использование css3, но затем используете его. https://developer.mozilla.org/en-US/docs/Web/CSS/opacity Я мог бы прочитать это неправильно, но думаю, что непрозрачность появилась только в css3. – Spaceman

Вы можете использовать CSS переходы, которые быстрее и не требует JQuery.

.fadeIn { 
    transition: opacity 1.25s; 
}

Добавьте класс fadeIn ваших элементов изображения, и теперь он будет исчезать.

Чтобы сделать это исчезать одна за другой, использовать таймеры JavaScript в космос из настройки непрозрачности 1. Пример:

var elements = [ /* Image elements to fade */ ]; 

for (var i = 0; i < elements.length; i++) { 
    setTimeout(function() { 
     elements[i].style.opacity = 1; 
    }, 1250 * i); 
}

источник

2015-11-17 06:04:57 apscience

Пожалуйста, объясните нижний предел? – apscience

Не было меня! Спасибо, я попробую вышесказанное. – chaser7016

Вы можете использовать функцию обратного вызова FadeIn загрузить другое изображение

function fadeIn() { 
$("#imageOne").fadeIn("fast",function(){ 
     $("#imageTwo").fadeIn("fast", function(){ 
      $("#imageThr").fadeIn("fast"); 
     }); 
    }); 
}

источник

2015-11-17 06:10:07 WisdmLabs

Это то, к чему я придумал. К сожалению, я не знаю, как заставить их затухать, поскольку ниже просто заставляет их появляться один за другим. Хотя это чистый Javascript.

Любые предложения?

var imageOne = document.getElementById('imageOne'); 
 
\t var imageTwo = document.getElementById('imageTwo'); 
 
\t var imageThr = document.getElementById('imageThr'); 
 

 
\t function fadeIn(element) { 
 
\t \t element.style.opacity += 0.9; 
 

 
\t \t if (element.style.opacity < 1) { 
 
\t \t \t setTimeout(function() { 
 
\t \t \t \t fadeIn(element); 
 
\t \t \t }, 100); 
 
\t \t } 
 
\t } 
 
\t setTimeout(function() { 
 
\t \t fadeIn(document.getElementById("imageOne")); 
 
\t }, 1000); 
 
\t setTimeout(function() { 
 
\t \t fadeIn(document.getElementById("imageTwo")); 
 
\t }, 5000); 
 
\t setTimeout(function() { 
 
\t \t fadeIn(document.getElementById("imageThr")); 
 
\t }, 10000);

источник

2015-11-17 06:54:22 chaser7016

Javascript: Fade В изображениях при загрузке страницы; один за другим?

ответ

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