Add delay when updating text on scroll change
<pre><code>function updateImageInfo() {
    var center = Math.floor(($(window).height() / 2)) + $(window).scrollTop();
    $('.mainimages').each(function(i, img) { 
        var top = $(img).offset().top;
        if(top &lt;= center &amp;&amp; top + $(img).height() &gt;= center) {
            if($('#imgwrap').data('currentImageId') != $(img).data('info').internal_id) {
                $('#infotext').text($(img).data('info').misc.name);
            }
            $('#imgwrap').data({ 'currentImageId' : $(img).data('info').internal_id });
        }
    }); 
}
</code></pre>

<hr>

<pre><code>$(window).scroll(function () { 
    updateImageInfo();
});
</code></pre>

<p>What i would like to do is to add a delay when the text gets updated, <code>$('#infotext').text($(img).data('info').misc.name);</code> and add some kind of animation like fadeIn and fadeOut when the text changes. </p>

<p>I've tried wrapping it with a <code>setTimeout()</code>, but if you scroll a lot up and down a lot, the text changes queue up. I think <code>proxy()</code> can be used to achieve this, but im not sure how to use it.</p>

<p>Live code: <a href="http://johanberntsson.se/dev/fotosida/" rel="nofollow">http://johanberntsson.se/dev/fotosida/</a></p>

<p>Thanks</p>
