如何中止淡出jqueryui菜单？

Question

我想停止淡出JQueryUI菜单.

相同的上下文:FireFox 43,Linux/Debian/Sid,Jquery2.2,JqueryUI1.11.4,至于这个问题; alpha阶段MELT监视器,Linux/Debian上的GPL免费软件,Linux上最新的Firefox 38或43; 这是 在github上提交b505eccc1 ...

^{(问题末尾的JsFiddle MVCE示例)}

在我的文件中,webroot/nanoedit.js我有一个全局变量mom_menucmdel,它包含一个JqueryUI菜单(一个下拉菜单).该mom_removecmdmenu功能正在清除全局并从DOM中删除该菜单.

如果用户不进行任何交互,我希望此菜单淡出并在9秒内删除.但是如果用户在菜单中移动鼠标,我希望淡入淡出中止.所以我编码:

 var curmenu = mom_menucmdel;
 curmenu.mousemove
 (function(ev)
  { console.log("momdelayrepl movefinishing ev=", ev, " curmenu=", curmenu);
    curmenu.finish();
  });
 setTimeout(function()
            {
                console.log("mom_cmdkeypress-delayedreplmenudestroy curmenu=",
                            curmenu);
                curmenu.delay(100).fadeOut(800+75*dollvalseq.length,
                                      function () {
                                          console.log ("momdelayrepl finalfaderemove curmenu=", curmenu);
                                          mom_removecmdmenu();
                                      });
            }, 9500);

靠近第427行nanoedit.js; 我的理解是finish会中止动画.但它不起作用.即使在鼠标移动后,褪色仍然存在,菜单也会消失.

如果您足够勇于编译MELT监视器,请浏览http://localhost.localdomain:8086/nanoedit.html,键入$ etextearea,然后 esc 键入密钥.

---

JsFiddle示例(MVCE)

看到这个JsFiddle,它是上面的简化变体; 跑了两次.首先,单击按钮,至少等待10秒.菜单渐渐淡出并消失.然后,再次运行它,点击按钮,然后移动鼠标内部菜单(甚至选择一些项目),菜单仍然会消失在大约10秒,但我希望它留下来,也许是无限期的(在我的nanoedit.js 代码的select函数将删除它,在这个JsFiddle我不在乎)!

Answer 1

var mymenu;
var mybutton;
var count = 0;
var menuTO;

function remove_menu() {
  if (!mymenu) return;
  console.log("removing mymenu=", mymenu);
  mymenu.remove();
}

function fadeOutMenu() {
  console.log("fading mymenu=", mymenu);
  mymenu.delay(100).fadeOut(900, remove_menu);
}
$(document).ready(function() {
  mybutton = $("#mybutton_id");
  mybutton.on("click", function() {
    count++;
    var menuid = "menuid_" + count;
    $("#mymenudiv_id").append("<ul class='menucl' id='" + menuid + "'</ul>");
    mymenu = $("#" + menuid);
    mymenu.append("<li>first</li><li>counting " + count + "</li><li>last</li>")
    mymenu.menu({
      select: function(ev, ui) {
        console.log("selected ui=", ui);
        $("#message_id").html("<b>selected</b> <i>" + ui.item.text() + "</i> menu#" + count);
      }
    });
    mymenu.mousemove(function(ev) {
      console.log("mousemove ev=", ev);
      clearTimeout(menuTO);
      menuTO = setTimeout(fadeOutMenu,
        9000);
      //mymenu.finish();
    })
    menuTO = setTimeout(fadeOutMenu,
      9000);
  })
})

ul.menucl {
  background-color: lightpink;
  color: navy;
  font-size: 80%;
  display: inline-block;
}
p.explaincl {
  font-size: 75%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>
  See <a href='http://stackoverflow.com/q/34818540/841108'>this SO question</a>
</p>
<h2> my menu </h2>
<p class='explaincl'>
  First, try clicking the button, and do nothing more: the menu disappears in 10 sec. Then, try again, click the button, move the mouse inside the menu, it is still disappearing but I want it to stay!</p>
<button id='mybutton_id'>click me</button>
<div id='mymenudiv_id'>
  Here
</div>
<p id='message_id'>
</p>

我已将超时 id 存储在变量 menuTO 中。然后，在每次鼠标移动时，我都会重置超时，以便当鼠标在菜单内移动时菜单不会淡出。

另请记住，如果您的光标位于菜单内但没有移动，那么它显然会在接下来的 9 到 10 秒内淡出。