Question

我遇到问题，当$（this）悬停时，让我的页脚导航栏的兄弟姐妹淡化他们的不透明度。我尝试用jQuery做到这一点，它的工作原理......但不是很顺利。如果您将鼠标从图标悬停到图标，它们会以我不想要的方式开始闪烁和闪烁。

必须有一种更顺畅，更简单的方法来实现这一点......

为了更好地解释，这是我对问题所做的一个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()：

1.7.0.RC1

<强> jsFiddle example

Answer 2

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

我喜欢＆＃34;停止（）＆＃34;回答并且会投票，但是当我在将鼠标移到每个社交图标上时查看链接时，它仍然看起来不正确。也许是延迟或类似的事情。

在此解决方案中，我删除了javascript，只在opacity属性上使用CSS转换。我认为如果在需求中允许，css是一个更好的工具。希望这会有所帮助。

li .sibling .fade与jQuery有关

2 个答案: