<div> 失去焦点时的jQuery动画答案

【问题标题】：jQuery animate when <div> loses focus<div> 失去焦点时的jQuery动画
【发布时间】：2010-12-13 15:14:59
【问题描述】：

我的网站上有以下代码：

<!-- 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 来完成这个？

【问题讨论】：

.focusout(): api.jquery.com/focusout
jQuery hide element when clicked anywhere on the page的可能重复
@sje: .focusout() 通常用于具有后代<input> 元素的元素。 <div> 本身无法获得 focusout 所需的焦点。

标签： javascript jquery html

【解决方案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;

 }
});

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

【讨论】：

这真的很接近。当我单击#boat_weather_tab_button 时，它会正确地向下滑动，但在第一个动画结束后立即向上滑动。
实际上，这非常有效，我只需要在原始函数中的每个动画之后添加return false; 即可防止该动画触发。
您添加的&& $("#boat_weather_tab").queue()==0 可确保如果用户在动画播放完毕之前单击其他位置，该 div 不会关闭。我现在还有一个问题：你能想出一种方法来防止#boat_weather_tab 内的文档点击触发动画吗？
'event'参数应该有鼠标的坐标，所以首先想到的方法就是将鼠标坐标与标签的位置+尺寸进行比较，以确定点击是否在里面标签与否。我做了一个快速搜索，看看是否有一个 jquery 方法已经这样做了，但我没有找到。

【解决方案2】：

您也许可以使用blur event。它本质上是一种失去焦点的行为。

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

【讨论】：