jQueryが一部に反映されない。

HTML, CSS, jQuery3.4.1に関する質問です。

コードは
https://jsfiddle.net/gruioq/bdczt06w/7/
です。

質問内容：
jQueryを用いて，あるリンクを踏みページを遷移する時に，画面全体が左に流れるように描写したいと考えています。
しかし，一部の<div>に対してjQueryが適用されていません，具体的には<span class="right_side">　＞　</span>，<div class="mouseover">， <div class="line_top"> の部分が動きません。

jQueryの処理は，（現状としては）一番上部のplese click hereをクリックすると，<body id="index">全体に効果がかかるようにしているつもりです。

恐らくcssのspan.right_side {
float: right;
text-align: right;
が邪魔をしているのではないかとも思っているのですが，mouseoverなどにも影響が出ているので少し分かりませんでした。

問題点はどちらにあるのでしょうか。ご教授のほどよろしくお願いいたします。
また，私自身まだ初心者であり，こちらのコードは様々なところから寄せ集めたものですのでお手柔らかにお願いします。


m.ts10806さんからのアドバイスより，
下記に最小限のコードを記載させて頂きます。なおこちらのコードはLhankor_Mhyさんのアドバイスを用いて，問題点が解消された後のものになります。

```html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML Sample</title>
  <link rel="stylesheet" href="css/style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/slidemove.js"></script>

</head>

<body id="index">
  <div class="header">
    Header Area
  </div>

<div class = "maintext">
  <div class="slidemove">
    <a href="#">
      <div class="linep"> 
        <span class="left_side">Please Click there</span>
        <span class="right_side">　＞　</span>
      </div> 
    </a>
  </div>
</div>
    
</body>
</html>
```
```CSS

#index{
  width: 100%;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 5vh;
  font-size: 3vh;
  background-color: rgb(206, 206, 206);
  
}
 
.maintext {
  margin-top:10vh;
  background-color: rgb(242, 242, 247);
  font-size: 3vh;
  overflow: auto;
  
}

a {
  text-decoration:none; 
}

span.left_side {
  font-weight: normal;
  background-color: rgba(192, 65, 65, 0);
  padding-left: 20px;
}


span.right_side {
  float: right;
  text-align: right;
  background-color: rgba(209, 41, 63, 0.842);

}

.line {
  color: #000000;
  background-color: rgba(184, 27, 27, 100);
  border-top : solid 1px rgb(0, 0, 0);
  border-bottom : solid 1px rgb(0, 0, 0);
  padding :0.5vh;
  }
```

```jQuery
$(function(){
	$("a").on('click',function(event){
		event.preventDefault();
		var linkUrl = $(this).attr('href');
	

		$('.slidemove').click(function() {
			$("#index").animate({
				opacity: 2,
				marginLeft: '-20vw'
			}, 'slow', 'swing', function() {
				$("#index").remove();
			});
		});
    setTimeout(action,500);
		function action() {
			location.href = linkUrl;
		}
		
	});
});
```
上記のコードはこちらになります。
https://jsfiddle.net/gruioq/bdczt06w/58/

解決策はLhankor_Mhyさんのコメントの通りです。

私なりの解釈としては，様々な<div>の要素に対して，幅が定義されていなかったため生じた問題だと考えています。

コメント頂きありがとうございました。