javascriptを用いたスライドがうまく作動しません。

メインビジュアルを分割し、ホバーで左右から画像がスライドしてくるようなホバーアクションを作成したいと
考えております。

【背景1（画像1をホバーで左から中央へスライド）】→【画像1】【画像2】←【背景2（画像2をホバーで右から中央へスライド）】

下記の通りの記述をし、スライドはするのですが、右斜め上からスライドされる、画像が範囲よりも大きくなりスライドする
などの挙動がおかしい状態でうまく作動しません。

画像のwidth:100%;を解除するとスライドはうまく作動するのですが、レスポンシブに対応する必要があり、頭を悩ませております。
初歩的な質問でしたら申し訳ありませんが、ご教示しただけたら幸いです。
どうぞよろしくお願いいたします。

html
1
2<div class="mainvisual">
3	<div class="visual-inner">
4		<div class="hoge01-area">
5		<a href="#"><img src="img/画像1" alt=""></a>
6		</div>
7		<div class="hoge02-area">
8		<a href="#"><img src="img/画像2" alt=""></a>
9		</div>
10	</div>
11
12	<div class="bg-hoge">
13	<a href="#"><img src="img/背景1" alt=""></a>
14	</div>
15
16	<div class="bg-hoge">
17	<a href="#"><img src="img/背景2" alt=""></a>
18	</div>
19</div>
20<!-- /mainvisual -->
21

scss
1.mainvisual{
2	position: relative;
3	line-height: 0;
4
5	.visual-inner{
6		position: relative;
7		z-index: 1000;
8		display: flex;
9		justify-content: center;
10		flex-wrap:wrap;
11
12		.hove01-area,.hoge01-area a,
13		.hoge02-area,.hoge02-area a,{
14			width: 50%;
15			img{
16				width:100%;
17			}
18		}
19	}
20
21	.bg-hoge01{
22		position: absolute;
23		top: 0;
24		left:0;
25		z-index:999;
26		a img{
27			width: 100%;
28		}
29	}
30
31	.bg-hoge02{
32		position: absolute;
33		top: 0;
34		left:0;
35		z-index:999;
36		a img{
37			width: 100%;
38		}
39	}
40}
41

js$('.hoge01
1	$('.bg-hoge01').stop().animate({
2		left: 0
3	});
4	$('.visual-inner').stop().animate({
5		left: '2000px'
6	});
7	$('.bg-hoge02').stop().animate({
8		left: '2000px'
9	});
10});
11$('.bg-hoge01').on('mouseout', function () {
12	$('.bg-hoge01').stop().animate({
13		left: '-2000px'
14	});
15	$('.visual-inner').stop().animate({
16		left: '0'
17	});
18})
19$('.hoge02-area').on('mouseover', function () {
20	$('.bg-hoge02').stop().animate({
21		left: 0
22	});
23	$('.visual-inner').stop().animate({
24		left: '-2000px'
25	});
26	$('.bg-hoge01').stop().animate({
27		left: '-2000px'
28	});
29});
30$('.bg-hoge02').on('mouseout', function () {
31	$('.bg-hoge02').stop().animate({
32		left: '2000px'
33	});
34	$('.visual-inner').stop().animate({
35		left: '0'
36	});
37})
38});
39