jQuery的淡出懸停

我需要一點點的使用jQuery的幫助來獲得淡出效果，發生的事情，這是我的代碼：jQuery的淡出懸停

當你將鼠標懸停在圖片需要淡出的形象和表演下面的紅色，當你將鼠標從圖像上移開時，應該淡出。我認爲代碼可能需要一個停止功能 - 只是很難寫出它。

歡迎任何建議！

2012-02-29 Filth

在特定的jsfiddle，使用此：

$('#show').hover(function() { 
    $(this).stop(true).fadeTo("slow", 0); 
}, function() { 
    $(this).stop(true).fadeTo("slow", 1); 
});

你可以看到它在這裏工作：http://jsfiddle.net/jfriend00/BJwn7/。

他們在這裏關鍵是你不能使用.fadeOut()和.fadeIn()因爲當他們完成，他們成立display: none這將導致要隱藏的元素，並且攪亂.hover()功能。所以，相反只需將不透明度消除爲0（但懸停保持有效），然後當懸停離開時，淡出回到不透明度1.

我還必須從jsFiddle中移除紅色塊的不透明度CSS因爲您希望在淡出圖像時可以看到它，因此您可以將其保留在圖像後方。

如果你只是想在瀏覽器中支持CSS3轉換（IE還沒有版本）的效果，那麼你也可以做到這一點，沒有jQuery/JavaScript，只使用CSS3轉換。但是對於這樣簡單的事情，當你已經有jQuery時，只需使用jQuery淡入淡出並獲得跨瀏覽器支持就很容易了。

來源

2012-02-29 01:49:58 jfriend00

正是我所追求的謝謝jfriend00！ :-D – Filth 2012-02-29 01:52:16

@JordyVialoux - 我調整了一點加上'.stop（真）'所以它的表現好一點，如果你去輸入/輸出迅速。 – jfriend00 2012-02-29 01:58:38

$('#show').hover(
    function() { 
    $(this).fadeOut("slow"); 
    }, 
    function() { 
    $(this).fadeIn("slow"); 
    } 
);

來源

2012-02-29 01:42:47 msonsona

關閉，但它需要淡出，當你將鼠標懸停 - 嘗試使用的jsfiddle以上鍊接是否有幫助。 – Filth 2012-02-29 01:50:20

檢查@ jfriend00的解決方案，它似乎工作更順暢 – msonsona 2012-02-29 01:54:06

你真的在他們的jsfiddle試試這個？我認爲它不起作用，因爲'.fadeOut（）'在完成時隱藏了對象，這會弄亂'.hover（）'。 – jfriend00 2012-02-29 01:56:01

您開始使用CSS轉換，所以這是一個使用這樣一個例子：

http://jsfiddle.net/PPpnT/33/

我使用Firefox，這樣的例子是僅用於Firefox的更新，但其他人應該是對稱的。

瞭解更多關於此這裏：

http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/

現金

CSS Webkit Transition - Fade out slowly than Fade in

來源

2012-02-29 01:48:07

感謝您對本不過，我需要這個工作的跨瀏覽器 – Filth 2012-02-29 01:49:37

沒問題 - 不幸的是IE瀏覽器似乎並不支持目前這樣的：http://stackoverflow.com/questions/5103283/確實，互聯網資源管理器支持CSS的躍遷 – 2012-02-29 01:51:46

fadeOut的示例將不適用於您的html代碼。原因很簡單 - mouseout或hover的第二個功能將在fadeOut動畫結束時觸發，因爲圖像將獲得display:none屬性。看看我的代碼http://jsfiddle.net/TW232/

$('div').hover(function(){ 
    $(this).width($('img', this).width()).height($('img', this).height()); 
    $('img', this).stop(true,true).fadeOut('fast'); 
    }, function(){ 
    $('img', this).stop(true,true).fadeIn('fast'); 
});

HTML：

<div> 
<img id="show" src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt=""/> 
</div>

和css：

div {background:red; width:0px;}

來源

2012-02-29 01:52:08 Cheery

jQuery的淡出懸停

回答

相關問題