0

これらの画像を画面の下部から持ち上げて回転させてアニメーション化しています。ただし、アニメーション中、親 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});
                    });
                });
            };
4

1 に答える 1

1

.wrapperそのため、 divの高さをアニメーション化すると、オーバーフローが非表示になるように見えます。

高さの代わりに marginBottom を使用すると、オーバーフローが表示されたままになります。

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

于 2012-06-25T18:33:22.560 に答える