Question

我试着让一个按钮淡入，然后另一个跟进。有什么方法可以实现我想做的事吗？如果有方法或任何文章，请帮助我知道如何在窗口加载时一个接一个地制作动画？

HTML

        <li class="li">
        <a href="">
        <img class="image" src="http://templateafiq1.site88.net/button/about%20me.png">
        </a></li>

        <li class="li">
        <a href="">
        <img class="image" src="http://templateafiq1.site88.net/button/about%20me.png">
        </a></li>
    </center>
    </ul>
</font>

CSS

div header{
width:100%;
height:50px;
top:50px;
position:fixed;}

header .image{
height:110px;
width:110px;
opacity:0;

-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-webkit-animation-delay: 2s;
-o-animation: fadein 2s;
animation-timing-function:linear;
animation-fill-mode:forwards;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:1s;
-webkit-animation-fill-mode: forwards;}

#header .ul{
list-style-type: none;
position:fixed;
top:17px;
width:100%;}

header .li {
height:110px;
width:110px;
padding:1px;
display:inline;
z-index:1;}

#header .li a{
text-decoration:none;
height:110px;
width:110px;}

//Fade in effect
@keyframes fadein {
0% {opacity:0;}
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;}}

的Javascript

$(window).load(function() {
$("#header.image").fadeIn("fast");});

这里是演示：http://jsfiddle.net/pkjfgfpf/

抱歉英语不好，英语不是我的母语。非常感谢你的帮助。

Answer 1

fadeIn函数的第二个参数是动画完成后调用的函数。您可以使用此链接动画仅在上一个动画完成后发生。有关详细信息，请参阅fadeIn documentation。

HTML：

<img class="image" id="img1" src="imageUrl.filetype" />
<img class="image" id="img2" src="imageUrl.filetype" />
<img class="image" id="img3" src="imageUrl.filetype" />

JQuery的：

$("#img1").fadeIn("slow", function() {
    $("#img2").fadeIn("slow", function() {
        $("#img3").fadeIn("slow");
    });
});

CSS：

.image {
    display: none;
}

Example JSFiddle（删除了所有不相关的部分）

Answer 2

可能这可能是您的解决方案，请在您的代码中进行调整（请参阅此处的示例http://jsfiddle.net/nepal12/8jjooaox/）

// HTML
<div id="images">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
</div>

// Css
div#images { font-size: 0; background: #000; }
div#images img { width: 50%; height: auto;
opacity: 0; transition: .8s opacity; }
div#images img.visible { opacity: 1; }

// Javascript

<script>
var images = document.querySelectorAll("#images img"), i = 1;
Array.prototype.forEach.call(images, function(images) {
setTimeout(function(){ images.classList.add("visible") }, 700*i)
i++;
})

</script>

Answer 3

改变这个：

$('#header.image').fadeIn('fast');

要：

$('.image').each(function(index,domEle){ 
      setTimeout(function ( ) { 
                                if(domEle.style.webkitAnimationPlayState!=undefined && domEle.style.webkitAnimationPlayState != null) 
                                { 
                                       domEle.style.webkitAnimationPlayState = 'running'
                                } 
                                if(domEle.style.mozAnimationPlayState!=undefined && domEle.style.mozAnimationPlayState != null) 
                                { 
                                       domEle.style.mozAnimationPlayState = 'running'
                                } 
                                if(domEle.style.oAnimationPlayState!=undefined && domEle.style.oAnimationPlayState != null) 
                                { 
                                       domEle.style.oAnimationPlayState = 'running'
                                } 
                                if(domEle.style.msAnimationPlayState!=undefined && domEle.style.msAnimationPlayState != null) 
                                { 
                                       domEle.style.msAnimationPlayState = 'running'
                                } 
                                if(domEle.style.animationPlayState!=undefined && domEle.style.animationPlayState != null) 
                                { 
                                       domEle.style.animationPlayState = 'running'
                                } 
                             },index*2000); 
  });

在CSS样式中，只需添加以下内容：

header .image{
   animation-play-state:paused;
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
   -ms-animation-play-state: paused;
   -o-animation-play-state: paused;
}

示例小提琴http://jsfiddle.net/pkjfgfpf/

我可以在窗口加载时一次制作一个css动画吗？

3 个答案: