1

我正在做一个后台播放器。当用户单击#play按钮时，主菜单会淡出0.1以不妨碍视图。但是他可以随时使用主菜单，只要将鼠标移到主菜单上并返回 opacity 即可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

请建议。

4

2 回答 2

1

演示 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);
});
于 2012-01-04T07:13:33.317 回答
1

怎么样，只需将菜单的最终值写入一个变量，然后使用它来淡化菜单到它：

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);
});
于 2012-01-04T07:28:33.973 回答