質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

1289閲覧

jQueryでアニメーションが動かない

migawari_113

総合スコア13

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/11/01 06:08

編集2018/11/01 06:30

前提・実現したいこと

jQueryでアニメーションを制作しています。
mouseoverで背景色を紫に変化させ、mouseoutでもとに戻したいのですが、うまく動作してくれません。

発生している問題・エラーメッセージ

背景色が変化しない

該当のソースコード

jQuery

1 $(function () { 2 var duration = 300, 3 defaultColor = '#3498DB', 4 changeColor = '#ae5e9b'; 5 6 $(".s10w button:nth-child(-n+3)").on({ 7 'mouseover': function () { 8 $(this).stop(true).animate({ 9 backgroundColor: changeColor 10 }, duration); 11 }, 12 'mouseout': function () { 13 $(this).stop(true).animate({ 14 backgorundColor: defaultColor 15 }, duration); 16 } 17 }); 18 });

試したこと

jshintを利用した文法チェック

補足情報(FW/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

root_jp

2018/11/01 06:21

文法チェックしたのに文法間違ってますね。changeColor = '#ae5e9b',; これはカンマいらないでしょう。
migawari_113

2018/11/01 06:30

コピペミスでした。ありがとうございます。
guest

回答3

0

animateに指定できる値は数値型にしか対応できないそうです。
リファレンスに書いてありました。
jQuery.Colorプラグインを利用するとお望みの結果が得られると思われます。

投稿2018/11/01 07:03

ltsim

総合スコア22

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

単純にjQuery標準のanimateは数値系のデータしか処理できないので
jQuery-uiを追加で読めばよいでしょう。

javascript

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 3<script> 4$(function () { 5 var duration = 300, 6 defaultColor = '#3498db', 7 changeColor = '#ae5e9b'; 8 9 $(".test").css({ 10 backgroundColor: defaultColor 11 }).on({ 12 'mouseover':function () { 13 $(this).animate({ 14 backgroundColor: changeColor 15 }, duration) 16 }, 17 'mouseout':function () { 18 $(this).animate({ 19 backgroundColor: defaultColor 20 }, duration); 21 }, 22 }); 23}); 24</script> 25 26<div class="test">test</div> 27<div class="test">test</div> 28<div class="test">test</div> 29<div class="test">test</div> 30<div class="test">test</div>

投稿2018/11/01 07:11

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

migawari_113

2018/11/01 07:39

解決しました!ありがとうございます。
guest

0

セミコロンの前にカンマがあるからシンタックスエラーが出てる気がします。

javascript

1changeColor = '#ae5e9b',;

【追記】
console.log()を入れてみて、どうなるかお試しください。
何も出力されないようならセレクタの指定が間違ってると思うので、そのときは質問文に該当のHTMLを記載して頂けると何かお答えできるかもしれません。

javascript

1$(".s10w button:nth-child(-n+3)").on({ 2 'mouseover': function () { 3 console.log("mouseover"); 4 $(this).stop(true).animate({ 5 backgroundColor: changeColor 6 }, duration); 7 }, 8 'mouseout': function () { 9 console.log("mouseout"); 10 $(this).stop(true).animate({ 11 backgorundColor: defaultColor 12 }, duration); 13 } 14});

投稿2018/11/01 06:18

編集2018/11/01 06:54
tomoyuki123

総合スコア273

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

migawari_113

2018/11/01 06:32

コピペ時に間違えていたみたいです。 修正しましたが、問題は変わらずです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問