javascript - 使用 jquery 从上到下淡化和翻译 "position:absolute"元素

Question

类“anim”需要从上到下淡入

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>

CSS代码

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

我想在 jquery 动画中使用 show() 和 top:0px，非常感谢您的帮助

Answer 1

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; }
}

然后，应用到你想要淡入淡出的div

.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;
}

如果你想让div从上到下淡入淡出，你可以给每个div一个唯一的类名，然后用动画css命令为每个div创建一个选择器(上面选择器中的最后五行) 。你唯一改变的是秒的参数。顶部应该以最快的速度淡出(假设 0.2s)然后增加它直到最后(这里的所有代码应该在一个 cssfile 中)

jQuery 方式

将所有的 div 放在一个数组中，然后在增加延迟的同时为每个 div 设置动画

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

    });
});

虽然您可以玩玩渐变时间(假设添加索引*2000 而不是 1000)在淡出之前确保不透明度为 0

Fiddle