mouseleave 函数fadeTo 初始值（返回）

Posted 2023-04-14

【中文标题】mouseleave 函数fadeTo 初始值（返回）

【英文标题】：mouseleave function fadeTo initial value (turn back)

【发布时间】：2012-01-04 07:03:54

【问题描述】：

我正在做一个后台播放器。当用户单击#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

请提出建议。

【参考方案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);
);

【参考方案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);
);

【讨论】：

效果很好，我会使用你的解决方案。谢谢你。但是，jQuery 没有类似于 CSS 的属性 :hover?只需鼠标悬停即可更改样式，当您取出时，无需指定即可恢复默认样式？

不，你可以使用 .hover(in, out) 代替 mouseenter 和 mouseleave 但最终它只是另一种写法。