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

Question

前提・実現したいこと

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/ツールのバージョンなど）

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

Answer 1

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

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

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

よろしければご参考に。

Codepenサンプル

Comments

[19941224ngng]

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

Answer 2

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

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

元のソースコードだと、以下のように最終的にmargin-leftとmargin-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>

Comments

[19941224ngng]

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