jQuery画像をフェードインする方法

Question

最初の質問。

基本的に、私は画像の配列を作り、バックグラウンドを変更するためにランダムにループするように管理しました。それはうまく動作します。設定された間隔ですべて。しかし、過渡期はあまりにも急で/震えている。

どのようにして徐々にフェードインとフェードアウトできますか？それに関連するコード全体だから、待つのではなく変更を引き起こすボタンさえあります。私もそれをフェードインにしたいと思います！ありがとうございました。

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)] + ")"); 
 
});

Answer 1

あなたは身体の背景として画像を使用しているので、私はbackgroundプロパティのためのCSS3を使用することをお勧め：

この記事を見てみてください。CSS3 Fade Effect

Answer 2

フェードインするアニメーションプロパティを使用

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