Question

The Class＆＃34; anim＆＃34;需要从上到下淡入

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方式：

创建一个costum动画

{ [CastError: Cast to ObjectId failed for value "11" at path "_id"]
  message: 'Cast to ObjectId failed for value "11" at path "_id"',
  name: 'CastError',
  kind: 'ObjectId',
  value: 11,
  path: '_id',
  reason: undefined }

然后，申请你要淡化的div

@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从上到下淡入，你可以给每个div一个唯一的类名，然后使用animation css命令为每个div创建一个选择器（上面选择器中的最后五行））。你唯一改变的是秒的参数。顶部应该最快消失（假设0.2s），然后将其增加到最后（这里的所有代码应该在一个cssfile中）

jQuery方式

将所有div放入一个数组中，然后在增加延迟的同时为每个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;
}

虽然你可以玩褪色时间（假设，添加索引* 2000而不是1000）确保在渐变之前不透明度为0

<强> Fiddle

Answer 2

您可以在Css3中执行此操作，只需更改元素的className即可。

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

Answer 3

for supplment逐一显示：

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

淡化和翻译＆＃34;位置：绝对＆＃34;使用jquery从上到下的元素

3 个答案: