CODEWITHSUNDEEP
jquerydefaultmouseentermouseleavefadeto
LGVentura
LGVentura

Reputation: 1547

mouseleave function fadeTo initial value (turn back)

I'm doing a background player. When the user clicks the #play button, the main menu fade to 0.1 to not obstruct the view. But he can use the main menu at any time by passing the mouse over it and back to opacity 1. When he removes the mouse, becomes transparent again.

When the user presses the #pause button, the opacity of the main menu goes back to opaque. But when he removes the mouse over from the main menu, the opacity must remains 1.

Basically I have this:

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

You can see it working here: http://luisgustavoventura.com

Please suggest.

Upvotes: 1

Views: 500

Answers (2)

bardiir
bardiir

Reputation: 14782

How about this, just write the final value for your menu to a variable and then use that to fade the menu to it:

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

Update regarding the comments: Here's another solution that uses the actual value from the menu but this might be prone to runtime errors when the user reenters the menu while it's still fading out:

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

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206344

DEMO jsBin

You can do something like this:

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

Upvotes: 1

Related Questions