jQuery that works inside of a function ... but not outside?
<p>In the following jQuery code:</p>

<pre><code>    $(document).ready(function(){   

    function parse(document){
        $(document).find("entry").each(function(){
            $("#items").append(
                '&lt;h3&gt;&lt;a href="#"&gt;'+$(this).find('title').text()+'&lt;/a&gt;&lt;/h3&gt;'+
                '&lt;div&gt; '+$(this).find('summary').text()+'&lt;/div&gt;'
            );
            $('#items &gt; div').hide();
        });
    }

    $.ajax({
        type: "GET",
        url: 'www.---.com', // name of file you want to parse
        dataType: "xml",
        success: parse,
        error: function(){alert("Error: Something went wrong");}
    });

            //ANIMATION
    $('#items h3').click(function(){
        $(this).next().animate({'height':'toggle'}, 'slow', 'easeOutBounce');
    });

    $('#footer').click(function(){alert("Why does this work, but not the bouncing panels?")});

});
</code></pre>

<p>The section marked //ANIMATION works when I place it inside the parse() function, but is very flaky. When placed outside of it, as above, it will not run at all.</p>

<p>Why? I'm really banging my head on the wall trying to understand why it won't run.</p>
