メニューに3つのリンクがあります。
リンクをクリックすると、そのリンクの下にバーが動くアニメーションが稼働します。
問題は、アニメーションが終了する前にリンク先にアクセスし、途中でアニメーションが止まってしまいます。
アニメーション終了後にリンク先にアクセスするよう、
JQueryを修正したコードをご教授いただけると大変助かります。
JQuery
1$('#navi a').click(function(){ 2 $('#navi span').stop().animate({ 3 width: $(this).outerWidth(), 4 left: $(this).position().left} 5 ,'fast'); 6 }); 7});
HTML
1<div id="navi"> 2 <a href="hoge1.html" data-ajax="false" class="current">メニュー1</a> 3 <a href="hoge2.html" data-ajax="false">メニュー2</a> 4 <a href="hoge3.html" data-ajax="false">メニュー3</a> 5 <span></span> 6</div><!-- /navi -->
参考情報
・リンク先を特に設定しない状況では、アニメーションは問題なく稼働しています。
こちらのコードをほとんど活用しているためです。
・Jqueryのコードは割愛していますが、初期設定では、メニュー1の下にバーを置いています。
HTMLのclass="current"の場所にバーが初期設定であるようにしています。
・preventDefault()などを利用すれば良いといった情報も見受けられて、
チャレンジしていみましたが、うまくいきませんでした。
情報が正しくても、うまくコードが書け可能性もあり、具体的なコードで
ご指導いただけると大変助かります。
・スマホでの利用を主に考えているため、clickをmouseoverに変えるというのは考えておりません。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/03/18 01:01
2016/03/18 01:05