jQuery Animation logo 淡入淡出

Posted 2023-03-06

技术标签:

【中文标题】jQuery Animation logo 淡入淡出【英文标题】：jQuery Animation logo fade in fade out 【发布时间】：2017-06-13 20:37:32 【问题描述】：

我目前卡在这里，我想实现和this website一样的效果。但我不知道该怎么做。有人愿意给我看代码吗？

基本上，该网站在开始时会显示几秒钟的徽标，然后淡出到 div 区域。我想制作我自己的版本来显示我自己的徽标，然后淡入我想向其他人展示的 div 区域中的内容。显示的 logo 和 div 必须在同一个网页上。

请帮忙。

【问题讨论】：

1) 您需要用您想要的东西链接到该网站，2) 您需要试一试，并通过明确的问题与我们分享您的工作。 ***.com/help/how-to-ask "我想制作自己的版本" --> 继续。然后在您的代码无法正常工作时与我们联系。我会给你一个提示，在你回来展示你的尝试后，我会看看你可能需要帮助的地方。以下术语将帮助您达到预期的效果：setInterval(), clearInterval(), fadeIn(), fadeOut(), 和 absolute positioning。这些是一个很好的起点。 【参考方案1】：

这根本不需要jQuery，用CSS就可以轻松搞定。

这是一个演示：

<!DOCTYPE html>
<html>
<head>
    <title> Valid HTML5 documents require title tags </title>
    <style type="text/css">
        #logo 
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            left: 0;
            top: 0;
            width: 100%;
            height: 0;
            opacity: 0;
            background-color: #fff;
            pointer-events: none;
            cursor: default;

            transition: opacity 2.5s ease 5s, height 3s ease 7.5s;
            /*                 __^__    __^__      __^__    __^__
                                [1]      [2]        [3]      [4]

                [1] Time opacity takes to transition from 1 to 0;
                [2] Time opacity waits until it starts transitioning
                [3] Time height takes to transition from 100% to 0;
                [4] Time height waits until it starts transitioning (>= [1] + [2]);
            */
        
        .preload #logo 
            opacity: 1;
            height: 100%;
        
    </style>
</head>
<body class="preload" onload="document.body.className='';">
    <div id="logo"> YOUR LOGO HERE </div>
    <div id="content">
        <h1> wow, a title </h1>
        <p> yay, content </p>
    </div>
</body>
</html>

那么，它是如何工作的？

<body> 具有 preload 类。一旦加载（onload 事件），该类就会被删除。

虽然<body> 具有preload 类，但div#logo 将具有opacity: 1 和height: 100%。

一旦<body> 失去preload 类，div#logo 就会同时将opacity 和height 设置为0。但是transition 属性会阻止该更改立即生效。

opacity 等待 5 秒（延迟）开始转换。

opacity 需要 2.5 秒才能从 1 完全过渡到 0。

height 等待 7.5 秒（不透明度的 5 秒 + 2.5 秒）开始过渡。

height 需要 3 秒才能从 100% 完全过渡到 0。

几乎不需要任何 javascript 即可获得所需的效果，并且无需外部框架。

【讨论】：

非常感谢，您的回答解决了我的大部分问题。真的很感谢。但是我仍然有一些问题要问你，如果你不介意请帮我，当它出现时如何对“你的标志在这里”进行延迟效果，我的意思是让它的出现淡入。

以上是关于jQuery Animation logo 淡入淡出的主要内容，如果未能解决你的问题，请参考以下文章