javascript - 无法让 div 淡入然后平滑切换到另一个页面-6ren

javascript - 无法让 div 淡入然后平滑切换到另一个页面

转载作者：行者123 更新时间：2023-11-28 08:33:51

我试图通过淡入我的名字和信息来介绍我的网站，大约 5 秒后，我希望那个 div 消失，顺利过渡到一个完整的网站。目前，当我尝试淡出该介绍时，代码不允许我在该隐藏的 div 之上添加文本。我认为这可能需要使用 Javascript，但我不知道如何。

HTML:

<!DOCTYPE html>
<head>
    <title>My Name</title>
    <meta charset="utf-8">
    <meta name="description" content="My Organization">
    <meta name="author" content="My Name">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Youth | Society</title>
    
    <! -- FONTS -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    
    
    <! -- Mobile META tags -- >
    
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    
    <! -- CSS FILE -- >
    
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="website.css">

</head>

<body>

    <intro>
        <div class="text_paragraph">
    <h1>My Name</h1>
    <h3>My School</h3>
    <h3>Grade 10</h3>
        
        </div>
    </intro>
    
    </body>

</html>

CSS:

body {
    background-image:url(footer_lodyas.png);
}



intro {
    color: grey;
    font-family: sans-serif;;
    font-size: 19px;
    opacity: 0.5;
    text-align: center;
    margin-top: 200px;
 
}





 .text_paragraph {               
    -webkit-animation: fadeInOut 2s;
    opacity:0;
}

.bdy {
    -webkit-animation:fadeIn 3s;
}

@-webkit-keyframes fadeInOut{
    0% {
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    72% {
        opacity:1;
    }
    100% {
        opacity:0;
    } 
}

@-webkit-keyframes fadeIn{
    0% {
        opacity: 0;
    }
    75% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

最佳答案

应该是:

var $el = $('.text_paragraph');
$el.fadeIn(5000, function(){$el.fadeOut(3000)})

关于javascript - 无法让 div 淡入然后平滑切换到另一个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28156270/

文章推荐： javascript - d3网格线，已经做了一些研究但仍然卡住

文章推荐： css - input[checked] 单选输入的 CSS 选择器在 IE7 中不匹配

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 无法让 div 淡入然后平滑切换到另一个页面