###前提・実現したいこと
Jqueryを使用し、マウスオーバーで動くdivを作りました。
初回は想定の動作をするのですが、リサイズをすると、途中のアニメーションが
表示されません。stopのjumpToEnd引数部分を何とかすればいいのかなと思うのですが、何とかにたどり着けないので教えてもらえないでしょうか。
###該当のソースコード
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ReSize</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $(window).on('load resize',resize); function resize(){ var w = window.innerWidth halfWidth = parseInt(w/2); $('.lArea').css({ "width": halfWidth, "left" : -halfWidth }); $('.n1').hover(function(){ $('.lArea').css('background','#f00').stop(false,true).animate({ 'left':0 },2000); },function(){ $('.lArea').stop(false,false).animate({ 'left':-halfWidth },1000); }); $('.n2').hover(function(){ $('.lArea').css('background','#0f0').stop(false,true).animate({ 'left':0 },2000); },function(){ $('.lArea').stop(false,false).animate({ 'left':-halfWidth },1000); }); $('.n3').hover(function(){ $('.lArea').css('background','#00f').stop(false,true).animate({ 'left':0 },2000); },function(){ $('.lArea').stop(false,false).animate({ 'left':-halfWidth },1000); }); $('.n4').hover(function(){ $('.lArea').css('background','#999').stop(false,true).animate({ 'left':0 },2000); },function(){ $('.lArea').stop(false,false).animate({ 'left':-halfWidth },1000); }); } </script> <style> html,body {width:100%;height:100%;} body {background:#ccc;margin:0;padding:0} #wrap { position: relative; height:100%; } .lArea { position:absolute; left:-50%; width:50%; height:100%; display:block; background:#fefefe; opacity:0.6; } .rArea { position:absolute; left:50%; width:50%; height:100%; display:block; background:#fff; } ul{ margin:0; padding:0; } ul li { list-style:none; background:#ddd; margin:10px 0; width:50%; } </style> </head> <body> <div id="wrap"> <div class="lArea"></div> <div class="rArea"> <ul> <li class="n1"><a href="#">Menu1</a></li> <li class="n2"><a href="#">Menu2</a></li> <li class="n3"><a href="#">Menu3</a></li> <li class="n4"><a href="#">Menu4</a></li> </ul> </div> </div> </body> </html>
###試したこと
Hover時のStopを.stop(false,false)にすれば動きますが、できれば
.stop(false,true)で実装したいと思います。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/04 20:43