resize時のanimateについて

###前提・実現したいこと
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件

ベストアンサー

以下のようにすると質問者さんの実現したいことが行えると思いますが、いかがでしょうか？

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>ReSize</title>
6    <style type="text/css">
7        html, body {
8            width: 100%;
9            height: 100%;
10        }
11
12        body {
13            background: #ccc;
14            margin: 0;
15            padding: 0
16        }
17
18        #wrap {
19            position: relative;
20            height: 100%;
21        }
22
23        .lArea {
24            position: absolute;
25            left: -50%;
26            width: 50%;
27            height: 100%;
28            display: block;
29            background: #fefefe;
30            opacity: 0.6;
31        }
32
33        .rArea {
34            position: absolute;
35            left: 50%;
36            width: 50%;
37            height: 100%;
38            display: block;
39            background: #fff;
40        }
41
42        ul {
43            margin: 0;
44            padding: 0;
45        }
46
47        ul li {
48            list-style: none;
49            background: #ddd;
50            margin: 10px 0;
51            width: 50%;
52        }
53    </style>
54</head>
55<body>
56<div id="wrap">
57    <div class="lArea"></div>
58    <div class="rArea">
59        <ul>
60            <li class="n1"><a href="#">Menu1</a></li>
61            <li class="n2"><a href="#">Menu2</a></li>
62            <li class="n3"><a href="#">Menu3</a></li>
63            <li class="n4"><a href="#">Menu4</a></li>
64        </ul>
65    </div>
66</div>
67<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
68<script>
69    $(window).on('load resize', resize);
70    function resize() {
71        $('.lArea').css({
72            width: "50%",
73            left: "-50%",
74        });
75    }
76    $('.n1').hover(function () {
77        $('.lArea').css('background', '#f00').stop(false, true).animate({
78            left: "0"
79        }, 2000);
80    }, function () {
81        $('.lArea').stop(false, false).animate({
82            left: "-50%"
83        }, 1000);
84    });
85
86    $('.n2').hover(function () {
87        $('.lArea').css('background', '#0f0').stop(false, true).animate({
88            left: 0
89        }, 2000);
90    }, function () {
91        $('.lArea').stop(false, false).animate({
92            left: "-50%"
93        }, 1000);
94    });
95
96    $('.n3').hover(function () {
97        $('.lArea').css('background', '#00f').stop(false, true).animate({
98            left: 0
99        }, 2000);
100    }, function () {
101        $('.lArea').stop(false, false).animate({
102            left: "-50%"
103        }, 1000);
104    });
105
106    $('.n4').hover(function () {
107        $('.lArea').css('background', '#999').stop(false, true).animate({
108            left: 0
109        }, 2000);
110    }, function () {
111        $('.lArea').stop(false, false).animate({
112            left: "-50%"
113        }, 1000);
114    });
115</script>
116</body>
117</html>