當動畫時，邊界框會切斷圖像的邊緣

我正在爲從屏幕底部凸起並旋轉的這些圖像設置動畫。但是在動畫過程中，父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}); 
        }); 
       }); 
      };

來源

2012-06-25 LordZardeck

這樣看來，當你動畫.wrapper div的高度，溢出成爲隱藏。

通過使用marginBottom而不是高度，溢出保持可見。

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

來源

2012-06-25 18:33:22 r0m4n

好吧，看起來不錯，但我有幾個問題。爲什麼當你在圖像上時它不會觸發鼠標移出事件，但是當你走到它們的直接右側（仍然在它的X座標內）時，它會發生嗎？您可能需要在高度分辨率上查看它以查看我在說什麼。另一個問題，我實際上已經張貼在stackoverflow：http://stackoverflow.com/questions/11194774/bounding-box-is-cutting-off-edges-of-images-when-animating – LordZardeck

我無法複製你描述的懸停問題，但我給你一個在這裏寬度問題的潛在解決方案：http://stackoverflow.com/questions/11194631/need-to-total-width-of-rotating-images/11197114#11197114 – r0m4n

當動畫時，邊界框會切斷圖像的邊緣

回答

相關問題