javascript - 卡在加载屏幕上 (HTML)

Question

经过一段时间的谷歌搜索和尝试，我找到了解决我的加载屏幕没有移动的部分解决方案，而且很好，卡在了无限加载的循环中。 所以，让我们开门见山，我需要加载屏幕停止并继续前进，以便弹出虚拟文本。

完整代码可以在这个 (origin)JSFiddle 中找到.

$(function(){ // this replaces document.ready
			setTimeout(function(){
				$('#loader').fadeOut('slow', function() {
					$(this).remove();
				});
			}, 1500);
		});
		
                //fades out loading class
		setTimeout(function(){        
			$('#loader').fadeOut();
			$('.loading').delay(150).fadeOut('slow');
		}, 10000);
		
		//fades in the myDiv id
		setTimeout(function(){
			$('#myDiv').fadeIn();
			$('.animate_bottom').delay(200).fadeIn('slow');
		}, 3000);

<!-- hand animation parts -->
<div class="loading">
    <div class="finger finger-1">
        <div class="finger-item">
            <span></span><i></i>
        </div>
    </div>
    <div class="finger finger-2">
        <div class="finger-item">
            <span></span><i></i>
        </div>
    </div>
    <div class="finger finger-3">
        <div class="finger-item">
            <span></span><i></i>
        </div>
    </div>
    <div class="finger finger-4">
        <div class="finger-item">
            <span></span><i></i>
        </div>
    </div>
    <div class="last-finger">
        <div class="last-finger-item"><i></i></div>
    </div>
</div>

<!-- main page part -->
	
<div style="display:none;" id="myDiv" class="animate-bottom">
	<h2>Lorem ipsum!</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

非常感谢任何帮助。

Answer 1

您需要在元素中添加 jQuery 才能使其正常运行

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>

只需在“[JavaScript]”之后添加即可

编辑:对于 future 正在寻找答案的人来说，如果您遇到某些动画无法正常工作的问题，请检查控制台中是否有任何错误，在这个特定的答案中有:

$ is not defined

所以 jQuery 没有定义，添加源代码使其再次运行!