社交媒體圖標褪色和交換效果與Jquery

我搜索周圍，並沒有找到任何東西，這是令人驚訝的，因爲我常常看到這種影響的網站。社交媒體圖標褪色和交換效果與Jquery

問題：社交標識太多，不能與網站的外觀和感覺衝突顯示。

解決方案：將它們變成網站其餘部分的顏色，當用戶將它們懸停在它們上面時，它們會轉變它們通常的光彩色彩。（具體來說，我想要一個淡出效果來做到這一點）

我可以得到這個工作作爲一個簡單的交換，但我真的很喜歡淡入淡出效果，認爲這是值得的額外的時間和代碼，以使其正確。

無論如何，我還發現一個解決方案可以與單個圖像一起工作，但現在我的問題是當用戶將鼠標懸停在一個圖像上時，所有圖像都會更改。我想單獨針對他們，我已經使用$（this）這樣做了，但它仍然不起作用。

我已經嘗試了一些失敗的嘗試，這裏是我的最新消息：

的HTML：

<div id="social"> 
<ul> 
<li><a href="http://skype.com/yourid" target="_blank"><img class="up" src="images/icon_skype_blk.png" alt="social media icon"> 
<img class="over" src="images/icon_skype_over.png" alt="social media icon"></a>&nbsp;</li> 
<li><a href="http://vimeo/.com/yourid" target="_blank"><img class="up" src="images/icon_vimeo_blk.png" alt="social media icon"> 
<img class="over" src="images/icon_vimeo_over.png" alt="social media icon"></a>&nbsp;</li> 
<li><a href="http://youtube.com/yourid" target="_blank"><img class="up" src="images/icon_youtube_blk.png" alt="social media icon"> 
<img class="over" src="images/icon_youtube_over.png" alt="social media icon"></a>&nbsp;</li> 
</ul> 
</div>

在每個項目我一起來過的圖像。注意：我必須在每個列表項中放置不間斷空格，以使其識別CSS中圖像的絕對位置（top：0 left：0）。否則，所有元素都會堆疊在一起。哎呀！

的CSS：

#social ul li { 
     display: inline; 
     float: right; 
     position: relative; 
     width: 31px; 
    } 

img.up { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     width: 26px; 
     height: 26px; 
     z-index: 1; 
    } 

img.over { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     display: none; 
     width: 26px; 
     height: 26px; 
     z-index: 2; 
    }

在CSS我有一個設置爲顯示沒有這樣過圖像不顯示頁面加載時開始過級絕對定位。我使用Jquery在懸停時顯示它。

jQuery的：

$('img.up').hover(
    function(){ 
     $(this).stop() 
     $(this).fadeOut() 
     $('img.over').fadeIn() 
    }, 
    function(){ 
     $(this).stop() 
     $(this).fadeOut() 
     $('img.up').fadeIn()     
    } 
);

眼下，這個jQuery變淡所有影像複製到他們對（彩色）的狀態。然後即使搬出去也會保持這種狀態。我已經能夠做它其他的事情，但沒有像我想要的。（當用戶將鼠標懸停在每張圖片上時淡入淡出）。

如果有人能幫助它，將不勝感激。這是第3天，我還沒有找到我正在尋找的解決方案。

來源

2012-02-13 john brady

我認爲（如果我知道你要問什麼）可以達到同樣的事情CSS3過渡。你需要支持舊版瀏覽器嗎？ – 2012-02-13 21:41:42

感謝您的回答和反饋。是的，我希望至少使用該網站的這一功能支持舊版瀏覽器。 – 2012-02-13 21:56:03

現在，這個jQuery變淡所有影像複製到他們對（彩色）狀態

這是因爲你做的所有圖像動畫。$('img.over').fadeIn()

然後保持這種方式，甚至當你搬出

因爲你淡出$(this)是指$('img.up')

我建議呼籲<a>hover()代替，看看，如果這個工程：

html：（刪除東西的可讀性）

個

<a class="image"><img class="up" src="" alt=""><img class="over" src="" alt=""></a>

JQ：

$('.image').hover(
    function(){ $(this).find('.up').fadeOut().end().find('.over').fadeIn(); }, 
    function(){ $(this).find('.over').fadeOut().end().find('.up').fadeIn(); } 
);

來源

2012-02-13 21:40:47 elclanrs

太棒了！這工作完美。我甚至沒有想過要使用.find和.end。謝謝。 – 2012-02-13 22:12:17

很高興工作！隨時接受答案。 – elclanrs 2012-02-13 22:13:37

您需要通過添加上下文來製作相對於當前圖像的img.over。試試這個：

$('img.up').hover(
    function(){ 
     $(this).stop().fadeOut() // Chain your function calls to reduce selectors 
     $('img.over', $(this).parent()).fadeIn() 
    }, 
    function(){ 
     $('img.over', $(this).parent()).stop().fadeOut() 
     $(this).fadeIn()     
    } 
);

來源

2012-02-13 21:40:10

感謝您的反饋！不幸的是，我無法讓這個工作。圖像淡出，但沒有任何淡入。 – 2012-02-13 22:19:06

社交媒體圖標褪色和交換效果與Jquery

回答

相關問題