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

关于 cmets 的更新： 这是另一个使用菜单中的实际值的解决方案，但是当用户在菜单仍然淡出时重新进入菜单时，这可能容易出现运行时错误：

$("#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);
});