li .sibling .fade问题与jQuery

Question

我有问题与获取我的页脚导航栏的兄弟姐妹淡入淡出它们的不透明度当$（this）是悬停结束。我试图用jQuery做到这一点，它的工作原理...但不是很顺利。如果将鼠标从图标悬停到图标上，它们会以我不希望它们闪烁的方式闪烁。

必须有更顺畅，简单的方式来做到这一点，工程....

为了更好地解释，这里是我的jsfiddle的问题所做的：

https://jsfiddle.net/h48ay6es/

这里为jQuery的我的源代码，我有：

$(document).ready(function() { 
$('.footerLinks li').hover(
    function() { 
    $(this).siblings().fadeTo(500, 0.4) 
    }, 
    function() { 
    $(this).siblings().fadeTo(500, 1.0) 
    } 
) 
}); 

Answer 1

使用.stop()：

$(document).ready(function() { 
    $('.footerLinks li').hover(
    function() { 
     $(this).siblings().stop().fadeTo(500, 0.4) 
    }, 
    function() { 
     $(this).siblings().stop().fadeTo(500, 1.0) 
    } 
) 
}); 

jsFiddle example

Answer 2

footer { 
 
    background-color: #000000; 
 
    height: 300px; 
 
    padding-top: 100px; 
 
} 
 

 
.footerLinks { 
 
    text-align: center; 
 
} 
 

 
.footerLinks li { 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    padding-right: 10px; 
 
    opacity: 1; 
 
    transition: opacity 500ms; 
 
} 
 
.footerLinks li:hover { 
 
    opacity:0.4; 
 
} 
 

 
.footerLinks img { 
 
    max-width: 40px; 
 
} 
 

 
.footerNav { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<footer> 
 
    <ul class="footerLinks"> 
 
    <li> 
 
     <a target="_blank" href="https://www.facebook.com/CODAWORLD/"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/facebook_online_social_media-128.png"></a> 
 
    </li> 
 
    <li> 
 
     <a target="_blank" href="https://twitter.com/CODA_world"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/online_social_media_twitter-128.png"></a> 
 
    </li> 
 
    <li> 
 
     <a target="_blank" href="https://www.instagram.com/coda_world/"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png"></a> 
 
    </li> 
 
    <li> 
 
     <a target="_blank" href="http://www.youtube.com/codaworlddancecrew"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/youtube_online_social_media-128.png"></a> 
 
    </li> 
 
    </ul> 
 
</footer>

我喜欢的“停止（）”的答案，并会了投票这一点，但我看的链接通过鼠标在每个社会时它仍然看起来不正确。也许是延迟或类似的东西。

在这个解决方案中，我删除了JavaScript，只是在不透明属性上使用了CSS转换。如果需求允许的话，我认为css对于工作来说是一个更好的工具。希望这可以帮助。