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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

2回答

544閲覧

ナビゲーションバーでのアニメーションで、飛行機のアイコンをマウスオーバーしたリスト要素の左脇に動かし、マウスが離れた際には元に戻したい。

19941224ngng

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2020/03/20 22:33

前提・実現したいこと

jQueryをもちいた
ナビゲーションバーでのアニメーションで、左端にある飛行機のアイコンを、マウスオーバーしたリスト要素の左脇に動かし、かつ、マウスが離れた際にはアイコンを元の場所に戻したいです。

ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

マウスオーバーしたリスト要素の左脇に動かすことはできるようになったのですが、マウスが離れた際にアイコンを元に戻すということができません。

該当のソースコード

ソースコード html: <nav class="navbar fixed-top navbar-expand-md navbar-light bg-light"> <div class="container-fluid"> <a href="#" class="navbar-brand" aria-label="ホーム"> <i class="fas fa-plane" aria-hidden="true"></i> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item hikouki-home active"> <a class="nav-link" href="index.html">Home.</a> </li> <li class="nav-item hikouki-europe"> <a class="nav-link" href="europe.html">Europe.</a> </li> <li class="nav-item hikouki-america"> <a class="nav-link" href="america.html">America.</a> </li> <li class="nav-item hikouki-asia"> <a class="nav-link" href="asia.html">Asia.</a> </li> </ul> </div> </div> </nav> main.js: const onMouseenter = () => { $('.fa-plane').animate({ 'marginLeft': '8.5em' },1000); console.log('hoge'); }; const onMouseleave = () => { $('.fa-plane').animate({ 'marginRight': '8.5em' },1000); console.log('moge'); }; $('.hikouki-europe') .on('mouseenter', onMouseenter) .on('mouseleave', onMouseleave);

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答2

0

マウスオーバーしたリスト要素の左脇に動かすことはできるようになったのですが、

呈示のコードでそうなりますか?こちらで動作確認したところ、メニュー全体が移動するだけでした。
CSSでそうなるようにしているのでしょうか。

とりあえず提示のコードを少し改良して、各メニューアイテム上にマウスホバーしたら、飛行機アイコンがその左端に移動して、離れたら元に戻るサンプルを作成してみました。

よろしければご参考に。

Codepenサンプル

投稿2020/03/21 03:09

hatena19

総合スコア33620

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

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

19941224ngng

2020/03/21 10:11

サンプルまで用意していただき大変ありがとうございます。 勉強になりました!
guest

0

ベストアンサー

margin-left: 0;を指定すると、元の位置に戻ると思います。

jQuery

1const onMouseleave = () => { 2 $('.fa-plane').animate({ 'marginLeft': '0em' },1000); 3 console.log('moge'); 4};

元のソースコードだと、以下のように最終的にmargin-leftmargin-rightの両方に指定されてしまうことになってしまいます。
<i class="fa-plane"></i>
↓mouseover
<i class="fa-plane" style="margin-left: 8.5em;"></i>
↓mouseleave
<i class="fa-plane" style="margin-left: 8.5em; margin-right: 8.5em;"></i>

投稿2020/03/20 23:31

new1ro

総合スコア4528

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

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

19941224ngng

2020/03/21 10:12

うまく動きました。 大変ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問