社交媒体图标褪色和交换效果与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

回答

相关问题