Question

我希望停止淡出JQueryUI menu 。

相同的上下文：FireFox 43，Linux / Debian / Sid，Jquery2.2，JqueryUI1.11.4，以及this问题; Linux / Debian上的alpha阶段MELT monitor，GPL免费软件，Linux上最新的Firefox 38或43;这是b505eccc1...

上的提交github

^{（问题末尾的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);

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

如果你有足够的勇气编译MELT监视器，浏览http://localhost.localdomain:8086/nanoedit.html，在textearea中输入 $ e ，然后输入 esc key。

JsFiddle示例（MVCE）

请参阅上面的简化变体this JsFiddle;跑了两次。首先，单击按钮，至少等待10秒。菜单渐渐淡出并消失。然后，再次运行它，单击按钮，并将鼠标移动到菜单中（甚至可能选择一些项目），菜单仍然会在大约10秒内消失，但我希望它可以保留，也许是无限期的（在我的nanoedit.js代码中，select函数会删除它，在这个JsFiddle我不在乎）！

Answer 1

＆＃13;

int

＆＃13;

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);
  })
})

＆＃13;

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

＆＃13;

我已将Timeout id存储在变量menuTO中。然后在每次鼠标移动时我重置超时，这样如果鼠标在菜单内移动，菜单就不会淡出。

另外请记住，如果光标位于菜单内但未移动，则显然会在接下来的9到10秒内淡出。

Answer 2

当鼠标移动时，接受的答案将不必要地创建并清除大量超时。

您可以使用内置菜单事件focus和blur来更好地处理此问题，如下所示：

  mymenu.menu({
    focus: function(e, ui) {
      clearTimeout($(this).data('timeout'));
    }
  });
  mymenu.on('menublur', function(e, ui) {
    var timeout = setTimeout(function() {
      console.log("fading mymenu");
    }, 5000);
    $(this).data('timeout', timeout);
  });
  mymenu.trigger('menublur'); // start the timeout for the first time

menublur是一个内部（记录）的jquery ui事件，当菜单项失去焦点时会触发该事件。

请注意，我们应该在选项对象之外使用on()方法手动绑定要触发的事件。

Updated Fiddle

如何中止淡出jqueryui菜单？

JsFiddle示例（MVCE）

2 个答案: