Bottom to Top FadeIn for horizontally stacked DIV blocks

I am using jQuery Animate method to show horizontally stacked DIV blocks in sequential manner.

JavaScript:

function fade(index) {
    $('.block-item').eq(index).animate({
        opacity: 1
    }, function() {
        if (index < $('.block-item').length) {
            fade(index + 1);
        }
    })
}

fade(0);

Actual ask is to animate these blocks in bottom-up FadeIn manner like mixing fadeIn & slideUp.

is it possible to implement FadeIn effect in bottom up direction?

Second, Is there any way to overlap the animation? For example, second column animation starts when first column animation is 50% completed.

Any pointers would be really helpful.

Not sure about bottom-up, but here is up-bottom example for you: http://jsfiddle.net/d7wxtk1h/

UPD: just realized you want them to be horizontally-stacked :smiley: here is fixed version: http://jsfiddle.net/d7wxtk1h/2/

1 Like

The up-bottom animation is what all needed. Thanks @megazoid for providing code snippet that is easy to understand.

With current code snippet, subsequent columns animate on finish callback. Just wanted to know, if there is any way to control the animation where second column will animate as soon as first column in half visible.

Sure: http://jsfiddle.net/d7wxtk1h/3/

Just for interest’s sake you could do this in css alone assuming the number of elements isn’t dynamic.

e.g.

1 Like

I just can’t believe that this has been done with CSS alone. Thanks a lot @PaulOB for sharing the knowledge and code pen too.

The actual problem lies in browser support. The reason of searching a JS based solution is our client wants support for IE9. In this case, i can think of two possible options -

  • I can get back to client and suggest them not to expect animation support in IE9
  • Writing a fallback JS so that simple fadeIn animation is supported throughout

Please suggest me what’s your take on above given options or any other option to handle such cases.

If you are already using jquery then it would be easier just to stick with the jquery version as it supports the browsers you want.

You could use modernizr to provide a fallback if you still wanted the css animations.

if(!Modernizr.cssanimations) {
    //jQuery fallback 
}
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.