li .sibling .fade jQueryで問題を解決する

Question

私は、$（this）を上に置いたときに、フッターのナビゲーションバーの兄弟が不透明になるのに問題があります。私はjQueryでこれをやろうとしましたが、うまくいきましたが、非常にスムーズではありません。アイコンからアイコンへマウスを移動すると、それらのアイコンは点滅して点滅し始めます。

https://jsfiddle.net/h48ay6es/

そして、ここで：

より良い私が問題にしなかったjSfiddleあり、ここで、説明するために

....これを行うには、スムーズかつ簡単な方法作品がなければなりません私が持っている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トランジションを使用します。私は、それが要件に許されているなら、仕事のためのよりよいツールだと思う。お役に立てれば。