функция mouseleave fadeTo начальное значение (повернуть назад) - PullRequest
Новая
       19

функция mouseleave fadeTo начальное значение (повернуть назад)

1 голос
/ 04 января 2012

Я делаю фоновый плеер. Когда пользователь нажимает кнопку #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

Пожалуйста, предложите.

Ответы [ 2 ]

1 голос
/ 04 января 2012

Как насчет этого, просто запишите окончательное значение для вашего меню в переменную, а затем используйте его, чтобы скрыть меню: 

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);
});
1 голос
/ 04 января 2012

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