jQuery/jQueryUiを使用して日の出から日没までの時間に基づいて背景色を変更するには？

Question

私は日の出と日の入りの間に明るい青色と濃紺の紫色の間で背景色がゆっくりと移行する気象アプリに機能を組み込もうとしています。

var sun = "http://api.sunrise-sunset.org/json?lat=" + lat + "&lng=" + lon + "&date=today"; 
    $.getJSON(sun, function(sunData){ 
    var sunUp = sunData.results.sunrise; 
    var sunDown = sunData.results.sunset; 
    var sunStatus = sunData.status; 
    var nowEpoch = (Date.now())(1000) 

     $("body").animate({'background-color':'#56c1ff'},nowEpoch - ((sunDown)*(1000)), 'linear');` 

Answer 1

http://codepen.io/stephepush/pen/pbWwogは概念的に、これはあなたのコードです：関連するコードは以下です私のコードの一部は、あなたはここでプロジェクト全体をチェックアウトすることができます。午前の色（#fff）から始まり、夕方の色（＃000）に混じります。

でも、

まず、あなたのコードでは、現在は日没から減算しています。あなたはそれを逆にしたいと思っています。

次に、1つの夜間（朝）から2番目の夜間（夜）にブレンドしています。これはおそらく非常に微妙です。あなたは真ん中で1日中にブレンドする必要があります。または、あなたの背景は一日中夕暮れのように見えます。

var now = (new Date()).getTime(); 
 
var fakeMidnight = now + (30 * 1000); 
 
var untilMidnight = (fakeMidnight - now); 
 

 
console.log("it will become night over the next : " + (untilMidnight/ 1000) + " seconds.") 
 
$("body").animate({'background-color':'#000'}, (fakeMidnight - now), 'linear')

body { background-color:#fff; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>