我想一打开我的主页就启动一个动画,但是显示需要时间(身体保持显示一段时间)。 我的剧本:
$(document).ready(function(){
$('.logo').hide();
});
$(window).load(function(){
$('.logo').fadeIn('fast');
$(".logo").animate({
marginTop:'0px',
opacity:1
},200,'swing');
});
我试图操纵这段代码,但我是 javascript 的新手:(
$(window).on('load', function() {
$('.logo').hide().fadeIn('fast').animate({marginTop:'0px', opacity:1}, 500, 'swing');
});
此代码使用 $(window).on('load', function(){}) 函数来确保在运行动画之前加载整个页面,包括图像和其他资产。
$('.logo').hide().fadeIn('fast').animate({marginTop:'0px', opacity:1}, 500, 'swing');函数最初隐藏徽标,然后快速淡入,最后通过使用“摆动”缓动函数将其向上移动 0 像素并将不透明度设置为 1 在 500 毫秒内设置动画。
注意:确保您已在 HTML 文件中包含 jQuery 库,以使此代码正常工作。您可以通过在 HTML 文件的标头部分添加以下代码来实现:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
希望对您有所帮助!
非常感谢。我只是忘了说徽标上升了。我忘了编写脚本。我把所有的都给了你,当然,对我来说,只要标志升起来就足够了。再次感谢,你很棒 :)
<!-- /logo descend -->
$(window).on('load', function() {
$('.logo').hide().fadeIn('fast').animate({marginTop:'0px', opacity:1}, 500, 'swing');
});
<!-- /Slider goes up a bit -->
$(document).ready(function(){
$('#slider').hide();
});
$(window).load(function(){
$('#slider').fadeIn('slow');
$("#slider").delay(400).animate({
marginTop:'-1200px',
opacity:1
},800,'swing');
});
<!-- /logo and Slider rise (2 scripts) -->
$(document).ready(function(){
$('.logo').hide();
});
$(window).load(function(){
$('.logo').fadeIn('slow');
$(".logo").delay(200).animate({
marginTop:'-2400px',
opacity:1
},800,'swing');
});
$(document).ready(function(){
$('sl.slider').hide();
});
$(window).load(function(){
$('.sl-slider').fadeIn('slow');
$(".sl-slider").delay(800).animate({
marginTop:'0px',
opacity:1
},800,'swing');
});
在 HTML head 元素上的
defer
调用中添加关键字 <script>
。这将确保您的脚本在 HTML 文件的内容被解析后立即执行。
这是使用 VSCode 生成的一些样板代码的片段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="index.js" defer></script>
<title>Your Page</title>
</head>
<body>
<!-- Your code goes here -->
</body>
</html>
如您所见,我在开始脚本标签声明中包含了
defer
关键字。