使用jquery淡化并将“position：absolute”元素从上到下翻译

Question

The Class "anim" needs to fade in from top to bottom

HTML code

<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 code

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

I would like to work with show() and top:0px in jquery animation, thanks a lot for helping

Answer 1

The CSS way:

Create a costum animation

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

Then, apply to the divs you want to fade

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

if you want the divs to fade in from top to bottom, you can give each of the divs a unique class name and then create a selector for each of them with the animation css command (the last five lines in the selector above) . The only thing you change is the argument of the seconds. The top should fade the fastest (suppose 0.2s) and then increase it until the last (all the code here should be in one cssfile)

The jQuery way

Put all the divs in an array and then animate each of the while increasing the delay

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

    });
});

While you can play with the fading time (suppose, add index*2000 instead of 1000) Make sure opacity is 0 before fading

Fiddle

Answer 2

You can do it in Css3, you just need to change the className of your element.

.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 to show one by one :

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