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