Question

我想在my site的所有方框中淡出。但不是已经有效了。我希望首先最后一个框淡入，然后通过信息框等向下移动，这样框就会出现在彼此之后。

目前，fadein效果是：

.content {
    -webkit-animation: fadein 3s;
    -moz-animation: fadein 3s;
    -ms-animation: fadein 3s;
    -o-animation: fadein 3s;
    animation: fadein 3s;
    background: rgba(49,54,59,0.8);
    *zoom: 1;
}

@keyframes fadein {
    0% { opacity: 0; }
    75% { opacity: 0.3; }
    100% { opacity: 1; }
}

@-moz-keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

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

@-o-keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

可以使用jQuery，JavaScript和Css。我希望你能找到解决方案。

Answer 1

jQuery fadeIn函数（和大多数动画）都有一个“完整”选项。您可以传递另一个动画调用并链接它们以实现正确的顺序。

例如，你可以这样做：

$( "#box1" ).fadeIn( "slow", function() {
    // Animation complete
    $( "#box2" ).fadeIn( "slow", function() {
        // Animation complete
    });
});

Answer 2

您可以使用animation-delay来延迟动画，以便框一个接一个地淡出。

div {
    /* Will cause animation to start after 2 second delay */
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

Answer 3

最佳解决方案：

<script type="text/javascript">
      $(document).ready(function() {
        $(".content:hidden:last").delay(500).slideDown(1000, function() {
          $(".content:hidden:last").delay(500).slideDown(1000, function() {
            $(".content:hidden:last").delay(500).slideDown(1000, function() {
              //nothing
            });
          });
        });
      });
    </script>

对于淡入淡出，只需用fadeIn替换slideDown

Answer 4

你可以使用像stagger.css

之类的东西来做css

http://digitalfio.github.io/Stagger.css/

在<head>中包含css文件，将动画类应用于每个div，然后以下划线的形式向每个div添加一个计时类，后跟一个递增的数字 - 例如

<div class="animated slideIn _1"></div>
<div class="animated slideIn _2"></div>
<div class="animated slideIn _3"></div>
<div class="animated slideIn _4"></div>

所以你得到这样的东西：http://output.jsbin.com/cusuz/4

在彼此之后淡出盒子

4 个答案: