user782104 user782104 - 5 months ago 13
jQuery Question

Fade and translate the "position:absolute" element from top to bottom using jquery

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

The CSS way:

Create a costume 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

var divsArray = $('div.anim').toArray();
for (i = 0; i < divsArray.length; i++) { 
    $(i).delay(1000).animate({ opacity: 1 }, 700);‚Äč
}

while you can play with the delay time the or fading time (suppose, add i*100 to one of them)

Comments