javascript - 当 <div> 失去焦点时 jQuery 动画

Question

我的网站上有以下代码:

<!-- 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>

现在客户希望 #boat_weather_tab 不仅在点击 #boat_weather_tab_button 时向上滑动，而且当用户点击页面上的其他任何地方时，我理解相当于父容器 div #boat_weather_tab_container 失去焦点。

完成此任务我需要什么 jQuery？

Answer 1

也许

$(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;

 }
});

没有测试，但想法是文档点击现在只会在当前没有动画时隐藏船