我可以延迟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
    }
});