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對於工作來說是一個更好的工具。希望這可以幫助。