jqueryアニメーションに背景画像を含めるには

Question

このコードでは、背景に画像が表示されません。ここでアニメーション機能に問題がありますか？Codepen Link。ボタンによって異なる画像を背景に置く方法はありますかクリック機能

var colors=["http://publicdomainarchive.com/wp-content/uploads/2016/01/public-domain-images-free-stock-photos-002-1000x667.jpg","https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSCJmPmIMiKQPy0M68oDKYuzoQT6pT4kL37vH8DzS3z36fYgza0"]; 
$(document).ready(function(){ 
    $("button").on("click",function(){ 
     getQuote(); 
}); 
}); 

function getQuote(){ 
     var color=Math.floor(Math.random()*colors.length); 
    $("html body").animate({ 
     backgroundImage:colors[color], 
     color:colors[color] 
    },1000);  
    } 

Answer 1

まず、あなたはjQueryの.animate()方法でbackgroundImageプロパティをアニメーション化することはできません、第二backgroundImageプロパティは次のようになります。

backgroundImage: 'url(/path/to/image.jpg)'

は、あなたがして、すべてのクリックで新しい背景画像を必要とする場合別のURLの配列を使用してください：

var colors = ["#16a085", "#27ae60", "#2c3e50"]; 
var images = ["image-1", "image-2", "image-3"]; 

var color = Math.floor(Math.random()*colors.length); 
var image = Math.floor(Math.random()*images.length); 


$("body").css({ 
    backgroundImage: "url("+images[image]+")", 
    color: colors[color] 
}); 

jQueryはサポートしていませんjQuery UIを使用せずにカラーをアニメートする。

.message, .author { 
    transition: color 1000ms ease 0ms; 
}