jQueryでanimateメソッドが反応しない!
こういう不具合があったのでここに解決法をメモします。
jQueryでanimateメソッドが反応しなかった理由
結論、コード自体は間違ってませんでした。
今回やりたかったこと
下記のように、要素にマウスオーバーしているときに色を変えるアニメーションをjQueryで実装しようとしていましたが反応しませんでした。
li要素の文字のカラー#000を
マウスホバー時にカラー#67aed7に変化させる
↑これをしようとしたけど反応しなかった。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $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内に読み込めば解決です。
1 2 3 | <!-- jQuery本体より下 --> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- jQuery ファイルより上 --> |
※注意点は、jQueryの本体より下、jQueryファイルを読み込んでいるコードより上にプラグインを記述することです。