-5

我想在页面加载时向 3 个 div 添加动画。

当页面加载时，这三个圆圈应该来自正确的动画。

这是我的 HTML -

<div id="wrapper" class="clearfix">
    <div id="content">
        <div id="div1"></div>           
        <div id="div2"></div>           
        <div id="div3"></div>
    </div>
</div>

这是我的 HTML 和 CSS的 FIDDLE

任何人都可以帮助我使用 jQuery 添加动画。

4

2 回答 2

3

这里绝对不需要 JavaScript/jQuery。

只需使用 CSS3 就可以了。

检查更新的小提琴

CSS

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}

.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

HTML （添加的类）

    <div id="wrapper" class="clearfix">
        <div id="content">
            <div id="div1" class="fade-in one"></div>           
            <div id="div2" class="fade-in two"></div>           
            <div id="div3" class="fade-in three"></div>
        </div>
    </div>

您可以使用 CSS 制作许多动画……如果您不喜欢淡入，您可以选择其他一些动画，甚至组合几个（每个 div 的动画不同）

jQuery 示例也是如此

享受！

于 2013-08-12T04:00:54.500 回答
1

使用 jquery 动画http://api.jquery.com/animate/。在文档就绪状态下调用您的 JavaScript 函数

于 2013-08-12T03:55:22.100 回答