Javascript 淡入淡出并翻译；位置：绝对“；使用jquery从上到下的元素

“动画”类需要从上到下逐渐淡入

HTML代码

<div class="col-xs-6" style="position:relative;">
    <img src="<?= site_url('assets/image/right_bg.png'); ?>" style="width:100%; position:absolute; top:0; left:0;">
    <img class="anim" src="<?= site_url('assets/image/right_cover_1-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_2-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_3-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_4-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_5-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_6-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_7-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_8-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_9-11.png'); ?>">
    <img src="<?= site_url('assets/image/right_bg_mid.png'); ?>" style="width:100%; position:absolute; top:0; left:0;">
</div>

---

我想在jquery动画中使用

show（）

和

top:0px

，非常感谢您的帮助

您可以在Css3中完成，您只需要更改元素的类名

.beforeAnim {
    opacity: 0;
    width:100%; 
    position:absolute; 
    top:-100px; 
    left:0;
    transition: all 1s ease-in-out;
}

.anim {
    opacity: 1;
    width:100%; 
    position:absolute; 
    top: 0px; 
    left:0;
    transition: all 1s ease-in-out;
}

---

对于逐个显示的供应：

    var show_time = 0;

    function show_ball(ball) {
        ball.addClass('after');
    }

    $(".anim").each(function (index) {
        var ball = $(this);

        setInterval(function () {
            show_ball(ball);
        }, show_time);

        show_time += 500;
    });

---

CSS方式：

创建肋部动画

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

虽然您可以使用衰减时间（假设，添加索引*2000而不是1000） 在淡入前确保不透明度为0

---

您考虑过使用css3吗？当然，您介意提供一些建议吗谢谢。一个接一个地展示每个动画元素怎么样？e、 g.第一个元素显示，100秒后，显示下一个元素，依此类推..我制作了一个更优雅的jQuery代码并添加了一个fiddle

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.anim {
    display:none;
    width:100%; 
    position:absolute; 
    top:-100px; 
    left:0;

-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
     -o-animation: fadein 2s; /* Opera < 12.1 */
        animation: fadein 2s;
}

$(document).ready(function() {
    $(".anim").each(function(index, value) {
        $(value).fadeTo(index * 1000, 1);

    });
});