打开页面时触发一个js动画

问题描述 投票:0回答:3

我想一打开我的主页就启动一个动画,但是显示需要时间(身体保持显示一段时间)。 我的剧本:

$(document).ready(function(){
    $('.logo').hide();
});

$(window).load(function(){
    $('.logo').fadeIn('fast');
    $(".logo").animate({
        marginTop:'0px',
        opacity:1
    },200,'swing');
});

我试图操纵这段代码,但我是 javascript 的新手:(

javascript
3个回答
0
投票

$(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>

希望对您有所帮助!


0
投票

非常感谢。我只是忘了说徽标上升了。我忘了编写脚本。我把所有的都给了你,当然,对我来说,只要标志升起来就足够了。再次感谢,你很棒 :)

<!-- /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');
});

0
投票

在 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
关键字。

© www.soinside.com 2019 - 2024. All rights reserved.