Question

这里是我的问题...我有这个网站：LINK，字母和图片的fadein动画存储在CSS文件中，而最终的淡出动画是用Javascript编写的。 / p>

在淡出之后，我想将页面的背景颜色从灰色变为黑色，同时还有淡入淡出的动画，但我真的不知道该怎么做。

如果我设置更多延迟，动画似乎不起作用。有人能帮助我吗？

编辑：这是整个索引页面的代码：

Answer 1

以下对我有用：

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="utf-8">

    <link href="nuovissimo-codice.css" rel="stylesheet" type="text/css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>‌  
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function(e) {
           $("#tutto").delay(1000).fadeOut(1000, function () {
               $('body').animate({backgroundColor:'#000'}, 300); 
           });
        });


    </script>

    <title>dyingnow</title>
  </head>

  <body style="background-color:#404040">
  the rest goes here......

Answer 2

.fadeOut()可以使用可选的回调函数...

$("#divs").delay(15000).fadeOut(1000, function() {
    // any code here will run after .fadeOut() has completed...
    $('body').css('background','#000');
});

Answer 3

我在这里创建了一个jsFiddle http://jsfiddle.net/h2rtLp9q/

$(document).ready(function(){
    $("#test").delay(1000).fadeOut(1000, function(){
        $('body').css('background','#000');
    });
});

Answer 4

这是使用animation-delay使用纯CSS编写的替代方法。除非您尝试将事件绑定到这些动画，否则您可能更容易修补。

＆＃13;

/* CSS */

body {
    background: #000;
    -webkit-animation: bodyColor 15s;
}
div {
    width: 50%;
    margin: 0 auto;
}
div div {
    width: 100%;
    height: 50px;
    border: 1px solid black;
    margin-bottom: 10px;
    opacity: 0;
    -webkit-animation: 8s fadeInOut;
}
div div:nth-child(2) {
    -webkit-animation-delay: 1s;
}
div div:nth-child(3) {
    -webkit-animation-delay: 2s;
}
div div:nth-child(4) {
    -webkit-animation-delay: 3s;
}
div div:nth-child(5) {
    -webkit-animation-delay: 4s;
}
@-webkit-keyframes fadeInOut {
    50%, 80% { opacity: 1; }
    0%, 100% { opacity: 0; }
}
@-webkit-keyframes bodyColor {
    0%, 95% { background: #999; }
    100% { background: #000; }
}

＆＃13;

<!-- HTML -->

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

＆＃13;

更多延迟动画

4 个答案: