Question

我正在做一名后台球员。当用户点击#play按钮时，主菜单会淡入0.1以阻挡视图。但是他可以随时使用主菜单，将鼠标移到主菜单上并返回不透明度1。当他移开鼠标时，再次变得透明。

当用户按下#pause按钮时，主菜单的不透明度会变回不透明。但是当他从主菜单中移除鼠标时，不透明度必须保持为1。

基本上我有这个：

$("#play").click(function() {
    $("#menu").fadeTo('slow', 0.1);
    $(this).hide();
    $('#pause').show();
});

$("#pause").click(function() {
    $("#menu").fadeTo('slow', 1);
    $(this).hide();
    $('#play').show();
});

$("#menu").mouseenter(function() {
    $("#menu").fadeTo('slow', 1);
}).mouseleave(function(){
    $("#menu").fadeTo( // I want this back to the initial value, which can be 0.1 or 1 );
});

你可以看到它在这里工作： http://luisgustavoventura.com

请建议。

Answer 1

<强> DEMO jsBin

您可以这样做：

var paused = true;

$("#play").click(function() {
  paused = false;
  $("#menu").fadeTo('slow', 0.1);
  $(this).hide();
  $('#pause').show();
});

$("#pause").click(function() {
  paused = true;
  $("#menu").fadeTo('slow', 1);
  $(this).hide();
  $('#play').show();
});

$("#menu").mouseenter(function() {
  if (paused){return;}
  $("#menu").fadeTo('slow', 1);
  }).mouseleave(function(){
  if (paused){return;}
  $("#menu").fadeTo('slow', 0.1);
});

Answer 2

怎么样，只需将菜单的最终值写入变量，然后使用它将菜单淡入其中：

var menuopacity = 1;
$("#play").click(function() {
    menuopacity = 0.1;
    $("#menu").fadeTo('slow', menuopacity);
    $(this).hide();
    $('#pause').show();
});

$("#pause").click(function() {
    menuopacity = 1;
    $("#menu").fadeTo('slow', menuopacity);
    $(this).hide();
    $('#play').show();
});

$("#menu").mouseenter(function() {
    $("#menu").fadeTo('slow', 1);
}).mouseleave(function(){
    $("#menu").fadeTo('slow', menuopacity);
});

有关评论的更新：这是另一种使用菜单中实际值的解决方案，但当用户重新进入菜单时它可能会出现运行时错误：

$("#play").click(function() {
    $("#menu").fadeTo('slow', 0.1);
    $(this).hide();
    $('#pause').show();
});

$("#pause").click(function() {
    $("#menu").fadeTo('slow', 1);
    $(this).hide();
    $('#play').show();
});

var menuopacity = 1;
$("#menu").hover(function() {
    menuopacity = $("#menu").css('opacity');
    $("#menu").fadeTo('slow', 1);
}, function(){
    $("#menu").fadeTo('slow', menuopacity);
});

mouseleave函数fadeTo初始值（转回）

2 个答案: