アニメーション化されたコンテナがブラウザのウィンドウに表示されるまで、jQuery .animate（）を遅延させることはできますか？

Question

jQuery .animate（）を使用してdivの背景画像をアニメートしていますが、コンテナが折りたたみの下にプッシュされることがあります。時間の経過とともに表示されるようにスクロールしなかったため、完了しました。アニメーション化されているdivがブラウザのビューポートに表示されるまでアニメーションを遅らせる方法はありますか？それは価値があるものの私のコードです：

<div id="last-criteria"> 
     <div class="rating-criteria"> 
      <?php _e("Total Score", "swagger"); ?> 
     </div> 
     <div id="last-rating" class="rating-wrapper"<?php echo $rating_style; ?>> 
      <?php oswc_get_rating($rating, $postType, true); ?> 
      <br class="clearer" /> 
     </div> 
     <br class="clearer" /> 
    </div> 


<script type="text/javascript"> 
    jQuery.noConflict(); 
    jQuery(document).ready(function() { 
     jQuery('#last-criteria').delay(2000).animate({ 
      backgroundPosition: '260 0' 
     }, 2500, 'easeOutCubic'); 
    }); 
</script> 

Answer 1

jQueryの "ビューで"プラグインは、あなたが大いに役立つと思います。

http://remysharp.com/2009/01/26/element-in-view-event-plugin/

$('div').bind('inview', function (event, visible) { 
    if (visible == true) { 
     // element is now visible in the viewport 
    } else { 
     // element has gone out of viewport 
    } 
});