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]”之后添加

编辑：对于以后的人来说，如果您陷入某些动画无法正常工作的情况，请检查控制台中是否有任何错误，在此特定答案中有：

$ is not defined

因此未定义jQuery，并且添加源代码使其再次起作用！

卡在加载屏幕（HTML）上

1 个答案: