mouseleave函数fadeTo初始值（转回）

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