background-image слайдер, как сделать плавность?

184

12 мая 2019, 20:40

Всем привет! Есть у меня JS код слайдера при помощи background-image. Проблема в том, что он меняет изображения очень резко.

Помогите пожалуйста добавить плавность в это явление

var bgArr = [ 
  "http://via.placeholder.com/250x250/ff00ff/000000", 
  "http://via.placeholder.com/250x250/000000/ff00ff", 
  "http://via.placeholder.com/250x250/ff00ff/cdfc11" 
]; 
var i = 0; 
 
// Start the slide show 
setInterval(function() { 
  $("#demo").css("background-image", "url(" + bgArr[i] + ")"); 
  (i < bgArr.length - 1) ? i++ : i = 0 
}, 2000);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div id="demo" style="text-align:center;  
          width:90%;  
          height:310px;  
          overflow:hidden;  
          border-style:dashed;  
          border-width:1px;"> 
  <p style="margin-top:83px;"></p> 
</div>

Answer 1

Задай блоку #demo transition: all 1s;

var bgArr = [ 
  "http://via.placeholder.com/250x250/ff00ff/000000", 
  "http://via.placeholder.com/250x250/000000/ff00ff", 
  "http://via.placeholder.com/250x250/ff00ff/cdfc11" 
]; 
var i = 0; 
 
// Start the slide show 
setInterval(function() { 
  $("#demo").css("background-image", "url(" + bgArr[i] + ")"); 
  (i < bgArr.length - 1) ? i++ : i = 0 
}, 2000);

#demo { 
  transition: all 1s; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div id="demo" style="text-align:center;  
          width:90%;  
          height:310px;  
          overflow:hidden;  
          border-style:dashed;  
          border-width:1px;"> 
  <p style="margin-top:83px;"></p> 
</div>