CODEWITHSUNDEEP
jqueryanimation
LordZardeck
LordZardeck

Reputation: 8283

bounding box is cutting off edges of images when animating

I'm animating these images being raised from the bottom of the screen and rotated. But during the animation, the parent div is hiding any overflow until the animation is complete. How can I get it to show all parts of the images throughout the animation?

Example: http://aws.redemptionconnect.com/redemption/play.html

here's my plugin:

$.fn.handMenu = function(){
                var config = {
                    width: 172,
                    height: 256
                }, screen = {
                    x: ($(window).width()),
                    y: ($(window).height())
                }, numChildren = this.find('.wrapper').children().length, self = this;

                function findSpacing(){ var a = (screen.x / 2) / numChildren; return (numChildren * config.width >= screen.x / 2)? a - ((config.width - a) / numChildren) : 0; }
                function resize(){
                    self.find('.wrapper').css({
                        'left': ((screen.x / 2) - ((findSpacing() == 0)? config.width * numChildren : (screen.x / 2) / 2)),
                        'width': ((findSpacing() == 0)? config.width * numChildren : screen.x / 2)
                    }).children().each(function(i){
                        $(this).css({
                            'left': (findSpacing() * i)
                        });
                    });
                }

                resize();

                $(window).resize(function(){
                    screen.x = $(window).width();
                    screen.y = $(window).height();

                    resize();
                });

                this.find('.wrapper').hoverIntent(function(){
                    var wrapper = $(this);
                    wrapper.animate({
                        'height': config.height
                    }, 700).children().each(function(i){
                        $(this).animate({'left': 50 * i}).rotate({animateTo:(i - (numChildren / 2)) * 10});
                    });
                }, function(){
                    $(this).animate({
                        'height': 50
                    }, 600).children().each(function(i){
                        $(this).animate({'left': (findSpacing() * i)}, 500).rotate({animateTo: 0});
                    });
                });
            };

Upvotes: 0

Views: 626

Answers (1)

r0m4n
r0m4n

Reputation: 3512

So it appears that as you animate the height of the .wrapper div, the overflow becomes hidden.

By using marginBottom instead of height, the overflow remains visible.

http://jsfiddle.net/q4rDT/1/

Upvotes: 1

Related Questions