如何淡入jQuery圖像

基本上，我製作了一組圖像，並設法通過隨機循環來改變背景。它工作正常。在設定的時間間隔和一切。但過渡太突然/震動。

我該如何讓它慢慢淡入淡出？那就是與此相關的整個代碼，甚至有一個按鈕可以觸發更改而不是等待。我想讓它淡入淡出！謝謝。

var backs= [ "bike-1505039_1280.jpg", 
 

 
"bananas-698608_1280.jpg", 
 

 
"camera-813814_1280.jpg", 
 

 
"chevrons-937583_1280.jpg", 
 

 
"music-1283877_1280.jpg", 
 

 
"pattern-26442_1280.png", 
 

 
"people-2587310_1280.jpg", 
 

 
"puppy-1903313_1280.jpg", 
 

 
"road-166543_1280.jpg", 
 

 
"stone-1664918_1280.jpg", 
 

 
"street-1209403_1280.jpg", 
 

 
"technology-2643270_1280.jpg" 
 
]; 
 

 
setInterval(function() { 
 

 
     $("BODY").css("background-image", "url(" + backs[Math.floor(Math.random() * backs.length)] + ")"); 
 
}, 10000); 
 

 

 

 
$("#backChange").on('click', function(event) { 
 
    $("BODY").css("background-image", "url(" + backs[Math.floor(Math.random() * backs.length)] + ")"); 
 
});

來源

2017-08-25 Al-m

'slowly' - >'$（）。fadeIn（「slow」）'，請閱讀jQuery的文檔。 –

那麼是什麼讓它漸漸淡出？有沒有CSS轉換？ – adeneo

由於您使用的圖像作爲背景的身體，我建議使用CSS3的背景屬性：

請在文章一起來看看：CSS3 Fade Effect

來源

2017-08-25 09:49:13

謝謝！這工作！雖然有時候會有滯後或跳過，但我不確定是否是我係統的原因。但它仍然有效！謝謝 –

使用動畫屬性淡入

$('background-image').animate({ opacity: 1 }, { duration: 3000 });

來源

2017-08-25 09:59:52 ashik

如何淡入jQuery圖像

回答

相關問題