jQuery animate when <div> loses focus

I've got the following code on my site:

<!-- Boat weather widget -->
<div id="boat_weather_tab_container">
    <div id="boat_weather_tab">
        <script type="text/javascript" src="widget.js"></script>
    </div>
    <div id="boat_weather_tab_button">
        <img src="images/blank150.gif">
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $("#boat_weather_tab_button").click(function(){
        // boat_weather_tab_hidden = 1 on page load
        if (boat_weather_tab_hidden) {
            $("#boat_weather_tab").animate({
                marginTop: "-1px"
            }, 500);
            boat_weather_tab_hidden = 0;
        } else {
            $("#boat_weather_tab").animate({
                marginTop: "-254px"
            }, 500);
            boat_weather_tab_hidden = 1;
        }
    });
});
</script>

Now the client wants #boat_weather_tab to slide back up not just when #boat_weather_tab_button is clicked, but when the user clicks anywhere else on the page, which I understand to be the equ开发者_JAVA技巧ivalent of when the parent container div #boat_weather_tab_container loses focus.

What is the jQuery I would need to accomplish this?

Maybe

$(document).click(function(event)
{
 if(boat_weather_tab_hidden==0 && $("#boat_weather_tab").queue()==0 )
 {
   $("#boat_weather_tab").animate({
                marginTop: "-254px"
            }, 500);
            boat_weather_tab_hidden = 1;

 }
});

Not tested, but the idea is the document click will now only hide the boat when it is not currently animating

You might be able to use the blur event. It is essentially the act of losing focus.

$("#boat_weather_tab_container").blur(function() {
    //code to run on blur
});