mouseleave函數fadeTo初始值（轉回）

我正在做一個後臺播放器。當用戶單擊#play按鈕時，主菜單將褪色到0.1以不妨礙視圖。但他可以隨時使用主菜單，方法是將鼠標移過去並返回到不透明度1。當他移開鼠標時，再次變得透明。mouseleave函數fadeTo初始值（轉回）

當用戶按下#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

請建議。

來源

2012-01-04 LGVentura

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

來源

2012-01-04 07:13:33

yes這可以在條件的幫助下完成......好/快速回答。 – Murtaza 2012-01-04 07:14:58

非常感謝 – LGVentura 2012-01-04 08:16:54

@LGVentura不客氣！謝謝 – 2012-01-04 09:27:42

這個怎麼樣，只寫你的菜單終值給一個變量，然後用它來淡出菜單吧：有關評論

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

更新：下面是一個使用實際VALU另一種解決方案e，但是當用戶重新進入菜單時它仍然消失，這可能很容易出現運行時錯誤：

$("#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-04 07:28:33 bardiir

確實是一個很好的解決方案！ – 2012-01-04 07:40:28

它工作完美，我會用你的解決方案。謝謝。但是，沒有類似於CSS的jQuery屬性：懸停？只需用鼠標懸停和取出時改變樣式，回到默認樣式，而不必指定它？ – LGVentura 2012-01-04 08:07:33

不，您可以使用.hover（in，out）而不是mouseenter和mouseleave，但最終它只是寫它的另一種方式。 – bardiir 2012-01-04 08:13:26

mouseleave函數fadeTo初始值（轉回）

回答

相關問題