jQuery何時動畫 <div> 失去重點

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;

 }
});

尚未測試，但想法是文檔單擊現在將僅在當前未設置動畫時隱藏船

Answer 2

您也許可以使用blur事件 。 從本質上講，這是失去焦點的行為。

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