Могу ли я отложить jQuery .animate (), пока анимированный контейнер не появится в окне браузера?

Question

Я анимирую фоновое изображение div с помощью jQuery .animate (), но иногда контейнер перемещается ниже сгиба, и я боюсь, что пользователи пропустят анимацию, потому что они не прокручивали ее вниз, чтобы просмотретьраз это сделано.Есть ли способ отложить анимацию до тех пор, пока анимационный 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
    }
});