何かに0時間でjQueryの.animateを交換し、より効率的な

Question

...

http://jsfiddle.net/mnRNE/

CSS

body { 
height:2000px; 
} 

#top-box { 
position:fixed; 
width:200px; 
height:200px; 
margin-left:100px; 
margin-top:50px; 
background-color:blue; 
z-index:2; 
} 

#bottom-box { 
position:fixed; 
width:200px; 
height:200px; 
margin-left:110px; 
margin-top:60px; 
background-color:red; 
z-index:1;  

} 

JavaScript

$(document).ready(function() { 
    var away = false; 

$(document).scroll(function() { 
    if ($(document).scrollTop() > 250) { 
     if (!away) { 
      away = true; 
      $('#bottom-box').stop().animate({ 
       'margin-top': '200px' 
      }, 1500); 
     } 
    } else { 
     away = false; 
     $('#bottom-box').stop().animate({ 
      'margin-top': '60px' 
     }, 0); 
    } 
}); 
}); 

HTML

<div id="top-box"></div> 
<div id="bottom-box"></div> 

これは、ページ下にユーザーがスクロール一度250個のピクセルようになり、赤いボックスがアニメーション化し、青色のボックスの下から出てき。この最初のアニメーションは、トランジションが明白になるようにタイミングが取られています（赤い枠が目に見えるように滑り出します）。

ユーザーが250ピクセルを超えてスクロールバックすると、赤色のボックスが青色のボックスの下に戻るように設定されます。これはタイマーなしで行われるので、トランジションは即座に行われます（赤いボックスが元の場所にスナップバックします）。

これはうまく動作し、必要なすべてを行います。しかし、アニメーションを全く使わずに、タイミングやアニメーションを必要とせずに赤い枠を「margin-top：60px」に「リセット」するだけで、この2番目のアニメーションを実現するより良い方法があるかどうか不思議です？私が求めています基本的に

は、JavaScriptを...

 $('#bottom-box').stop().animate({ 
      'margin-top': '60px' 
     }, 0); 

セクションはなく、アニメーションを使用せずに同じ結果を達成するために異なった、より効率的に書かれるだろうか？一種の「bottom-box」から「margin-top」：「60px」のように？

Answer 1

私はjqueryの.cssを使用して

http://jsfiddle.net/mnRNE/1/

 $('#bottom-box').stop().css('marginTop', '60px'); 

ここトリック

Answer 2

$('#bottom-box').stop().css({ 
     'margin-top': '60px' 
    }); 

Answer 3

なぜ

$('#bottom-box').css('margin-top', '60px');