Check out my Pen here.
I'm having an issue with a share button that expands on hover. Everything works fine, except if you hover over it multiple times, the animation repeats as many times as you've hovered. Is there a way to prevent this from happening? Here's my original code:
$('.share-icon').hover(function () {
$(".share-open").animate({
opacity: "toggle",
width: "toggle"
}, 200, function () {});
});
I tried to fix it by only triggering the animation when the element is set to display:none, and while it improved slightly, there is still some jumpiness. I'm sure there must be a better solution. You can see my attempt here.
$('.share-icon').hover(function () {
if ($('.share-open').css('display') == 'none') {
$(".share-open").animate({
opacity: "toggle",
width: 170
}, 200, function () {});
} else {
$(".share-open").animate({
opacity: "toggle",
width: 0
}, 200, function () {});
}
});
Here is the HTML code:
<div class="share-outer">
<div class="share-event">
Share with your friends
<div class="share-icon">
<img src="arrow-hover.png">
<div class="share-open">
<img src="arrow.png">
<i class="fa fa-facebook-official"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-envelope-o"></i>
</div>
</div>
</div>
</div>
Relevant CSS:
.share-open {
display: none;
opacity: 1;
}
Appreciate any help or suggestions. Thanks!