jQuery animate on blur - but only if blur outside of form
<p>I have a search input (<code>#search_input</code>) which expands when being focused. Additional search options pop up that allow me to select specific search options.</p>

<p>The input should contract after it blurs, but only when the blur was triggered outside of the form.</p>

<p><a href="http://jsfiddle.net/zMp9S/" rel="nofollow">http://jsfiddle.net/zMp9S/</a></p>

<p>Right now I'm using the following which contracts the search input too early even when I'm just choosing a an option from the search option menu:</p>

<pre><code>$(function() {
    $("#search_input").focus(function(){
        $("#search_input").stop().animate({width: 310}, 200);
        $("#search_options").show();
    })
    $("#search_input").blur(function(){
        $("#search_input").stop().animate({width: 100}, 200);
        $("#search_options").hide();
    })        
});​
</code></pre>

<p>Putting focus / blur events on the form doesn't work.</p>

<p><strong>How can I tell jQuery to only contract <code>#search_input</code> when the blur happens outside the form <code>#search_form</code> ?</strong></p>
