jsバナーをクリックして開閉させたい

前提・実現したいこと

初めまして、よろしくお願いします。
jsを使って、画面の右サイドに、クリックで開閉可能なメニューバナーを作りたいと思っています。

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

一度クリックすると引っ込むのですが、2回目以降にクリックすると出てきてくれません。（反応しません）
クリック毎に開閉するようにしたいです。

該当のソースコード

<html>
<head>
<style>
	#slideR {
	    z-index: 99;
	  cursor: pointer;
	  position: fixed;
	  top: 40%;
	  right: -140px;
	  background: #0DCEA8;
	  width: 180px;
	  color: #fff;
	  font-size: 16px;
	}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
//マウスオーバーで表示
$(function() {
      $('#slideR').click(
      function(){
        $(this).animate({'marginRight':'140px'},500);
      },
      function () {
        $(this).animate({'marginRight':'0'},500);
      }
    );
});
</script>
</head>
<body>
	<nav id="slideR" style="margin-right: 140px;">
	<span class="nav-icon"><i class="fa fa-heart-o"></i></span>
	<ul>
		<li><a href="#">Top</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Content</a></li>
		<li><a href="#">Mail</a></li>
	</ul>
	</nav>
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

コメントに「マウスオーバーで表示」とありますが、クリックでの表示非表示切替で良いですか？
であれば、pen作ってきたので見て下さい。

https://codepen.io/Reek/pen/wmgdMx

・JS側ではクリックされる毎に#slideRにcssクラス「.active」の付与と削除を交互に行います。（toggleClass）
・CSS側では#slideRに.activeが付与された状態「#slideR.active」に対してright:0；としています。
・アニメーションしてほしいので、#slideRにはtransition:.4s;を指定しました。（0.4秒間で-140pxから0pxへ遷移します）

この様に、JSでは状態の変化だけを行いCSSでアニメーション設定を行うと考え方的に簡単になると思います。

投稿2018/03/20 00:02

編集2018/03/20 00:20