Здравствуйте !!!
Подскажите пожалуйста, как можно подружить setInterval и fade'ы ?
Цель просто по порядку
плавно вставить пути к картинкам из массива. Но порядок нарушается. Без фейдов работает как часы.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
</head>
<body>
<div align="center" style="height:220px;">
<img src="images/group1/1.jpg" alt="" width="200" height="200" id="slide_show"><br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="main.js"></script>
</body>
</html>
var mas = ['images/group1/1.jpg', 'images/group1/2.jpg', 'images/group1/3.jpg', 'images/group1/4.jpg'];
var i = 0;
function tim (){
var timer;
var j = 0;
timer = setInterval(function(){
$('#slide_show').fadeOut(600, function() {
$(this).attr('src', mas[i]).fadeIn(600);
});
console.log(mas[i]);
i++;
if(i > 3){
i = 0;
clearInterval(timer);
tim();
}
}, 3000);
}
tim();