簡単なhover関連のナビ切り替えエフェクト紹介だが、カーソルを滑らせてなめらかで自然な表示切替えの実装サンプルが「心地良い」という点で本当に参考になる。animateの前にstopメソッド〜スピードの部分が核。

jed_lee のブックマーク 2016/05/24 00:19

<blockquote class="hatena-bookmark-comment"><a class="comment-info" href="https://b.hatena.ne.jp/entry/26038627/comment/jed_lee" data-user-id="jed_lee" data-entry-url="https://b.hatena.ne.jp/entry/www.webopixel.net/javascript/179.html" data-original-href="http://www.webopixel.net/javascript/179.html" data-entry-favicon="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.webopixel.net%2Fjavascript%2F179.html" data-user-icon="/users/jed_lee/profile.png">jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種</a><ul class="comment-tag" style="list-style: none; margin: 0px;"><li style="float: left">[<a href="https://b.hatena.ne.jp/q/html">html</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/css">css</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%E3%82%A8%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88">エフェクト</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">アニメーション</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%E3%82%A4%E3%83%BC%E3%82%B8%E3%83%B3%E3%82%B0">イージング</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%E5%8F%82%E8%80%83">参考</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%E5%AD%A6%E7%BF%92">学習</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%E3%82%AF%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AB%E3%83%AB">クリティカル</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%E2%98%85%E2%98%85%E2%98%85%E2%98%85%E2%98%85">★★★★★</a>]</li></ul><br><p style="clear: left">簡単なhover関連のナビ切り替えエフェクト紹介だが、カーソルを滑らせてなめらかで自然な表示切替えの実装サンプルが「心地良い」という点で本当に参考になる。animateの前にstopメソッド〜スピードの部分が核。</p><a class="datetime" href="https://b.hatena.ne.jp/jed_lee/20160524#bookmark-26038627"><span class="datetime-body">2016/05/24 00:19</span></a></blockquote><script src="https://b.st-hatena.com/js/comment-widget.js" charset="utf-8" async></script>

このブックマークにはスターがありません。
最初のスターをつけてみよう！