javascript - 中心からアニメーションまたはスケーリング

Question

上部中央からdivの幅と高さをアニメーション化する方法についてのアイデアはありますか？effect（'scale'）を使用してみましたが、これは表示/非表示に基づいているため、完了後にスナップバックします。

次に、通常のアニメーションを試しました。

$('.box').animate({'width':200px,'height':200px,margin-left:-100px});

これは機能しますが、.boxの行があるので、他の人が反応して片側にプッシュするようにします。

Answer 1

微調整

フィドル

$('.day').hover(function() {

  if($(this).index()==0){
      $(this).animate({'width':400,'height':400}, 500);
  }else{            
      $(this).animate({'width':400,'height':400}, 500);
      $(this).parent().stop().animate({'margin-left':'-100'} , 500);  
  }          
}, function() {
   $(this).animate({'width':200,'height':200}, 500);
   $(this).parent().stop().animate({'margin-left':'0'}, 500);

});

Answer 2

多分このように：

$('.day').hover(function() {
    $(this).animate({'width':400,'height':400, 'margin':'-100px -90px'});        
}, function() {
    $(this).animate({'width':200,'height':200, 'margin': '0 10px'});      
});

フィドル： http： //jsfiddle.net/dmYY3/3/？