我可以延迟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的"in view"插件可以帮到你很多.

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
    }
});