jQuery animate when <div> loses focus

Question

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 equivalent of when the parent container div #boat_weather_tab_container loses focus.

What is the jQuery I would need to accomplish this?

Answer 1

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

Answer 2

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