jQueryでanimateメソッドが反応しない時の対処法

jQueryでanimateメソッドが反応しない！

こういう不具合があったのでここに解決法をメモします。

Contents

jQueryでanimateメソッドが反応しなかった理由
- 今回やりたかったこと
animateメソッドで数値以外を扱えるようになるプラグイン

jQueryでanimateメソッドが反応しなかった理由

結論、コード自体は間違ってませんでした。

今回やりたかったこと

下記のように、要素にマウスオーバーしているときに色を変えるアニメーションをjQueryで実装しようとしていましたが反応しませんでした。

li要素の文字のカラー#000を

マウスホバー時にカラー#67aed7に変化させる

↑これをしようとしたけど反応しなかった。

 $yellow = $('.yellow-box-bottom ul');

    $yellow.on('mouseover', function () {

        $(this).find("li").stop(true).animate({
            color: '#67aed7'
        },
            200
        );


    }).on('mouseout', function () {

        $(this).find('li').animate({
            color: '#000'
        },
            200
        );

$yellow = $('.yellow-box-bottom ul');

$yellow.on('mouseover', function () {

$(this).find("li").stop(true).animate({

color: '#67aed7'

200

);

}).on('mouseout', function () {

$(this).find('li').animate({

color: '#000'

200

);

コードの書き方が間違ってるのかな？と思いましたが、調べているうちに、

animateで指定できる値は数値のみ。

ということが判明しました。

つまり、animateメソッドはデフォルトだとopacity:0.7;とかの数値は有効でも、color:#67aed7;などの数値以外（文字列）を扱うことはできないということです。

解決法は、jqueryのプラグインを読み込む。これだけでした。

animateメソッドで数値以外を扱えるようになるプラグイン

自分と同じような理由で不具合が起きている人はこれをHTMLのhead内に読み込めば解決です。

  <!-- jQuery本体より下 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <!-- jQuery ファイルより上 -->

※注意点は、jQueryの本体より下、jQueryファイルを読み込んでいるコードより上にプラグインを記述することです。