Question

我有一个简单的脚本，当您将鼠标悬停在父菜单项上时会打开子菜单，并且效果很好。现在我只想尝试添加超时，以略微延迟子菜单的打开。我从各种各样的例子和jquery文档中尝试过setTimeout，但是无法让它工作。

这是脚本：

<script type="text/javascript">

$(document).ready (function() {

    $('.xxxMenu > li').on('mouseover', openSubMenu);
    $('.xxxMenu > li').on('mouseout', closeSubMenu);

    function openSubMenu() {
        $(this).find('ul').css('visibility', 'visible');    
    };

    function closeSubMenu() {
        $(this).find('ul').css('visibility', 'hidden'); 
    };



   });
</script>

这是HTML，简化：

<ul class="xxxMenu">
  <li><a href="#">Top Title</a>
    <ul>
      <li><a href="http://blahblah">Title One</a></li>
      <li><a href="http://blahblah">Title Two</a></li>
    </ul>
  </li>
</ul>

当你将鼠标移到＆＃34; Top Title＆＃34;时，一个子菜单包含＆＃34; Title One＆＃34;和＆＃34;标题二＆＃34;掉下来。实际的html包含更长的无序列表。

任何人都可以描述＆＃39; setTimeout＆＃39;是为了推迟'openSubmenu＆＃39;功能

更新

感谢您的快速回复，这两个答案看起来很棒。不幸的是，我在Confluence页面中实际完成了所有这些操作，并插入了＆＃34; HTML Include＆＃34;宏，它允许您在WIKI页面中使用HTML。但是它有一些怪癖，一个是我可以（并且必须）将脚本和CSS直接放入页面中，没有头部或身体参与（整个站点都有一个头，但在Confluence安装的区域，我没有编辑权限 - 长篇故事）。

结果是，我还没有能够显示/隐藏工作，也没有下面的任何一个解决方案，即使它们显然在常规HTML页面中工作。我尝试的大多数jquery都有效，但极少数例外，但这似乎就是其中之一。

然而，根据DinoMyte在下面评论中提出的建议，我已经使用animate来获取我需要的东西，部分无论如何。我现在拥有的是：

$(document).ready (function() {
    $('.xxxMenu > li').on('mouseover', openSubMenu);
    $('.xxxMenu > li').on('mouseout', closeSubMenu);

    function openSubMenu() {
        $(this).find('ul').css('visibility', 'visible').delay( 800 ).animate({opacity: 1.0}, 500);  
    };

    function closeSubMenu() {
        $(this).find('ul').css('visibility', 'hidden'); 
    };     
});

这显示短暂延迟后的子菜单。动画很快，但使用动画的关键在于它让我设置延迟。唯一的问题是它似乎只在第一次触发时才能在任何给定的菜单项上运行。一旦触发了子菜单，随后的鼠标移动就会回到旧的行为，立即弹出子菜单。我会研究为什么以及如何解决它，但如果有人知道请告诉我。

感谢所有建议，非常感谢。

Answer 1

<强> jsFiddle Demo

您可以使用 setTimeout^MDN 打包节目并隐藏代码。请记住，setTimeout中的函数回调在全局级别运行，因此this将为window，您需要将this存储到self之类，如图所示< / p>

function openSubMenu() {
 var self = this;
 setTimeout(function(){
  $(self).find('ul').css('visibility', 'visible');
 },350);
};

function closeSubMenu() {
 var self = this;
 setTimeout(function(){
  $(self).find('ul').css('visibility', 'hidden'); 
 },350);
};

＆＃13;

$('.xxxMenu > li').on('mouseover', openSubMenu);
$('.xxxMenu > li').on('mouseout', closeSubMenu);

$('.xxxMenu > li').find('ul').css('visibility', 'hidden');

function openSubMenu() {
    var self = this;
    setTimeout(function(){
    $(self).find('ul').css('visibility', 'visible');
    },350);
};

function closeSubMenu() {
    var self = this;
    setTimeout(function(){
    $(self).find('ul').css('visibility', 'hidden'); 
    },350);
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="xxxMenu">
  <li><a href="#">Top Title</a>
    <ul>
      <li><a href="http://blahblah">Title One</a></li>
      <li><a href="http://blahblah">Title Two</a></li>
    </ul>
  </li>
</ul>

＆＃13;

替代

<强> jsFiddle Demo

另一种方法是使用内置 fadeOut^{jQuery API} 的jQuery，以及 stop^{jQuery API} 来阻止从过度褪色中消失。

function openSubMenu() {
 $('ul',this).stop().fadeIn('slow');
};

function closeSubMenu() {
 $('ul',this).stop().fadeOut('fast');
};

＆＃13;

$('.xxxMenu > li').on('mouseover', openSubMenu);
$('.xxxMenu > li').on('mouseout', closeSubMenu);

$('.xxxMenu > li').find('ul').hide();

function openSubMenu() {
    $('ul',this).stop().fadeIn('slow');
};

function closeSubMenu() {
    $('ul',this).stop().fadeOut('fast');
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="xxxMenu">
  <li><a href="#">Top Title</a>
    <ul>
      <li><a href="http://blahblah">Title One</a></li>
      <li><a href="http://blahblah">Title Two</a></li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

您是否已开始使用自己的setTimeout来执行此操作？如果没有，请使用jquery的show / hide，而不是设置css可见性，然后您可以指定动画，延迟等。请参阅http://api.jquery.com/show/

http://jsfiddle.net/xa7qk4tc/1/

注意：mouseout已更改为mouseleave

$('.xxxMenu > li').on('mouseover', openSubMenu);
$('.xxxMenu > li').on('mouseleave', closeSubMenu);

$('.xxxMenu > li').find('ul').hide();

function openSubMenu() {
    $(this).find('ul').show('slow');
};

function closeSubMenu() {
    $(this).find('ul').hide('slow');
};

如何在一个简单的脚本中使用setTimeout

2 个答案: