CODEWITHSUNDEEP
javascriptjqueryhtmlcss
newman
newman

Reputation: 421

li .sibling .fadeTo issue with jQuery

I am having issues with getting the siblings of my footer navbar to fade their opacity when $(this) is hovered over. I tried to do this with jQuery, and it works...but not very smoothly. If you hover the mouse from icon to icon they start blinking and flashing in a manner that I don't want them to.

There must be a smoother and easier way to do this that works....

To better explain, here is a jSfiddle I did with the problem:

https://jsfiddle.net/h48ay6es/

And here is my source code for the jQuery I have:

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

Upvotes: 0

Views: 35

Answers (2)

orangeh0g
orangeh0g

Reputation: 428

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>

I liked the "stop()" answer and would up vote that but when I look at the links when passing the mouse over each social icon it still does not look right. Perhaps a delay or something like that.

In this solution I remove the javascript and just use CSS transition on the opacity property. I think css is a better tool for the job if that is allowed in the requirements. Hope this helps.

Upvotes: 0

j08691
j08691

Reputation: 207943

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

Upvotes: 1

Related Questions