当< div>的jQuery动画失去了重点 [英] jQuery animate when <div> loses focus

问题描述

我的网站上有以下代码：

 <！ - 船舶天气小工具 - > 
< div id =boat_weather_tab_container> 
< div id =boat_weather_tab> 
< script type =text / javascriptsrc =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; 
 animate（{
 marginTop：-254px
}，500）; 
 boat_weather_tab_hidden = 1; 
} {
 $（＃boat_weather_tab）。 
}）; 
}）; 
< / script> 
  

现在客户希望 #boat_weather_tab 滑动备份不仅仅是当单击 #boat_weather_tab_button 时，而是当用户点击页面上的任何其他位置时，我知道它等于父容器div <$ c

什么是我需要完成这项工作的jQuery？

可能

  $（document）.click（function（事件）
 {
 if（boat_weather_tab_hidden == 0&& $（＃boat_weather_tab）。queue（）== 0）
 {
 $（＃boat_weather_tab ）.animate（{
 marginTop：-254px
}，500）; 
 boat_weather_tab_hidden = 1; 
 
} 
}）; 
  

没有测试过，但是这个想法是文件点击现在只会隐藏当前不是动画

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?

解决方案

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

这篇关于当&lt; div&gt;的jQuery动画失去了重点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！