Функция 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); 
});