jQueryでの線引き

###発生した問題
jQueryで直線を引くアニメーションを作っているのですが縦の線が読み込んだときのウィンドウサイズでしか反映されず、スクロールするようなページになったときに下まで線が伸びない

###該当のソースコード

HTML
1<div id="horizon1"></div>
2<div id="horizon2"></div>

CSS
1#horizon1 {
2    position: absolute;
3    top: 100px;
4    left: 0;
5    width: 0;
6    height: 5px;
7    background: #E74C3C;
8}
9
10#horizon2 {
11    position: absolute;
12    top: 0;
13    left: 50px;
14    width: 5;
15    height: 0;
16    background: #E74C3C;
17}

Javascript
1$(function() {
2winW = $(window).width();
3spped = 3000;
4$('#horizon1').animate({
5width: winW
6}, spped);
7});
8
9$(function() {
10winW = $(window).height();
11spped = 3000;
12$('#horizon2').animate({
13height: winW
14}, spped);
15});
16

行動規範の内容に同意します

回答1件

documentの高さを取得してはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        #horizon1 {
8            position: absolute;
9            top: 100px;
10            left: 0;
11            width: 0;
12            height: 5px;
13            background: #E74C3C;
14        }
15
16        #horizon2 {
17            position: absolute;
18            top: 0;
19            left: 50px;
20            width: 5px;
21            height: 0;
22            background: #E74C3C;
23        }
24
25        .box {
26            height: 1500px;
27        }
28    </style>
29</head>
30<body>
31<div id="horizon1"></div>
32<div id="horizon2"></div>
33<div class="box"></div>
34<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
35<script>
36    $(function () {
37        winW = $(window).width();
38        spped = 3000;
39        $('#horizon1').animate({
40            width: winW
41        }, spped);
42    });
43
44    $(function () {
45        winW = $(document).height();//$(window).height();を$(document).height();に変更
46        spped = 3000;
47        $('#horizon2').animate({
48            height: winW
49        }, spped);
50    });
51</script>
52</body>
53</html>