jQueryのアニメーションはあまりうまく動作しません。どうすればそれをよりスムーズにすることができますか？

Question

は、私はこのサイト上のスライダーで効果をエミュレートしようとした：http://metalabdesign.com/

ここでアニメーションのコードです：

$('.tagLink').click(function() { 
      $('html').css('overflow', 'hidden'); 
      $('#tagBoxOverlay').show().stop(1).fadeTo(200, .9) 
      $('#tagBox').show().stop(1).animate({ 
       marginTop: '-37.5%', 
       marginLeft: '-37.5%', 
       height: '75%', 
       width: '75%', 
       opacity: 1 
      }, { 
       duration: 200, 
       specialEasing: { 
        opacity: 'linear', 
        width: 'linear', 
        height: 'linear', 
        marginLeft: 'linear', 
        marginTop: 'linear' 
       }, 
       complete: function() { 
        $(tagBoxContents).fadeTo(200, 1); 
        $('#tagBoxPopularWrapper').height($('#tagBox').height() - $('#tagBoxDescription').height() - 1); 
        $(window).resize(function() { 
         $('#tagBoxPopularWrapper').height($('#tagBox').height() - $('#tagBoxDescription').height() - 1) 
        }); 
       } 
      }); 

tagBoxOverflowとtagBoxは100％幅&高さを出し始めます。オーバーレイがフェードインし、ボックスがフェードインしたり縮小したりします。

ここにはライブが表示されるサイトがあります：http://hashtraffic.com/ 「ヒップスター」をクリックし、「ヒップスター」をクリックするとアニメーションが作成されます。

どうして遅いですか？私はここに迷ってしまいました

http://hashtraffic.com/js/HashTraffic.js

：ここではRAW JSへのリンクがあります。私はブラウザの多くを求めていることを理解していますが、metalabsはうまくいきます！ js fallbackでCSSアニメーションを使用するとスムーズになりますか？

Answer 1

css3トランジションを使用するにはかなりスムーズです（ただし、IEではこれには報われません）。

しかし、大きな問題はマージンだと思います。

私はそれを絶対位置にします。右上の下と左にアニメートします。

あなたのやっていることでは、ブラウザはページ全体をリフローさせることになりますが、位置を絶対にすると、サイズを変更しても、要素またはその親に影響しません。