jQueryでページの区切り（セクション）ごとに背景をanimateで変化させたい

###実現したいこと
jQueryでページの区切り（セクション）ごとに背景をanimateで変化させたい

###発生している問題
cssでは変化するが、animateを当てはめても変化しない。
以下のurlを参考にいたしました。
http://www.webopixel.net/javascript/487.html

###該当のソースコード

HTML
1<div class="section">
2    <h2>Section0</h2>
3    <p>
4        ここは0番目のコンテンツです。
5    </p>
6  </div>
7  <div class="section">
8    <h2>Section1</h2>
9    <p>
10        ここは1番目のコンテンツです。
11    </p>
12  </div>
13  <div class="section">
14    <h2>Section2</h2>
15    <p>
16        ここは2番目のコンテンツです。
17    </p>
18  </div>

jQuery
1$(function() {
2    var pageTop = $('html, body');
3    //各sectionの位置を入れる配列
4    var secTopArr = new Array();
5    //現在の番号
6    var current = -1;
7    //カラー設定の配列
8    var bgColor = new Array('#FFCC00','#33CCFF', '#CCCC99', '#33CC99', '#FF99CC');
9    //各sectionの位置を入れる
10    $('.section').each(function (i) {
11        secTopArr[i] = $(this).offset().top;
12    });
13
14    //背景変更
15    function chengeBG(secNum) {
16        if (secNum != current) {
17            current = secNum;
18            //animateだと変化しない↓
19            //$('body').stop().animate({backgroundColor: bgColor[current]},200);
20            //cssだと変化する↓
21            $('body').css({backgroundColor: bgColor[current]});
22        }
23    }
24    //スクロールイベント
25    $(window).scroll(function () {
26        for (var i = secTopArr.length-1; i>=0; i--) {
27            if ($(window).scrollTop() > secTopArr[i] - 100) {
28                chengeBG(i);
29                break;
30            }
31        }
32    });
33
34});
35

どうぞ、よろしくお願いいたします。

行動規範の内容に同意します

回答2件

他の方の回答にあるとおり、原因はanimate関数には一部例外を除いて数値を指定するプロパティしか指定できないことです。

The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties. This object is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.

この問題の解決策として、jQuery Colorというプラグインを利用するという手段もありかと思います。このプラグインを使うことでanimate関数で使用できるようになるプロパティは以下のとおりです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        div.section {
13            background: #fff;
14            padding: 20px;
15            height: 1000px;
16            margin-bottom: 20px;
17            border-radius: 10px;
18            -webkit-border-radius: 10px;
19            -moz-border-radius: 10px;
20        }
21    </style>
22</head>
23<body>
24<div class="section">
25    <h2>Section0</h2>
26    <p>
27        ここは0番目のコンテンツです。
28    </p>
29</div>
30<div class="section">
31    <h2>Section1</h2>
32    <p>
33        ここは1番目のコンテンツです。
34    </p>
35</div>
36<div class="section">
37    <h2>Section2</h2>
38    <p>
39        ここは2番目のコンテンツです。
40    </p>
41</div>
42<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
43<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
44<script>
45    $(function () {
46        var pageTop = $('html, body');
47        //各sectionの位置を入れる配列
48        var secTopArr = new Array();
49        //現在の番号
50        var current = -1;
51        //カラー設定の配列
52        var bgColor = new Array('#FFCC00', '#33CCFF', '#CCCC99', '#33CC99', '#FF99CC');
53        //各sectionの位置を入れる
54        $('.section').each(function (i) {
55            secTopArr[i] = $(this).offset().top;
56        });
57
58        //背景変更
59        function chengeBG(secNum) {
60            if (secNum != current) {
61                current = secNum;
62                //animateだと変化しない↓
63                $('body').stop().animate(
64                    {
65                        "background-color": bgColor[current]
66                    },
67                    200
68                );
69            }
70        }
71
72        //スクロールイベント
73        $(window).scroll(function () {
74            for (var i = secTopArr.length - 1; i >= 0; i--) {
75                if ($(window).scrollTop() > secTopArr[i] - 100) {
76                    chengeBG(i);
77                    break;
78                }
79            }
80        });
81    });
82</script>
83</body>
84</html>