Question

I am animating the background image of a div using jQuery .animate(), but sometimes the container is pushed below the fold and I’m afraid users will miss the animation because they haven’t scrolled down to view it by the time it’s done. Is there a way to delay the animation until the div that’s being animated is visible in the browser’s viewport? Here’s my code for whatever it’s worth:

    <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

I think the “in view” plugin for jQuery would help you alot.

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