경계 상자가 움직일 때 이미지의 가장자리를 자르고 있습니다.

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/