jquery - 动画时边界框会切断图像的边缘

Question

我正在为这些图像制作动画，这些图像从屏幕底部升起并旋转。但是在动画期间，父 div 会隐藏任何溢出，直到动画完成。如何让它在整个动画中显示图像的所有部分？

示例：http ://aws.redemptionconnect.com/redemption/play.html

这是我的插件：

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

Answer 1

.wrapper因此，当您为div 的高度设置动画时，溢出似乎被隐藏了。

通过使用 marginBottom 而不是高度，溢出仍然可见。

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