Skip to content

Instantly share code, notes, and snippets.

@haydenbleasel
Created April 26, 2016 12:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save haydenbleasel/8af3d1aab8c8591cb39f36e049b4eabf to your computer and use it in GitHub Desktop.
Save haydenbleasel/8af3d1aab8c8591cb39f36e049b4eabf to your computer and use it in GitHub Desktop.
Animated strikethrough on hover
$('a').addClass('strikethrough').hover(
(e) => $(e.target).stop().addClass('mouseenter'),
(e) => {
$(e.target).stop().removeClass('mouseenter').addClass('mouseleave');
setTimeout(() => {
$(e.target).stop().removeClass('mouseleave').addClass('no-transition');
}, STIKETHROUGH_DURATION - STIKETHROUGH_OFFSET);
setTimeout(() => {
$(e.target).stop().removeClass('no-transition');
}, STIKETHROUGH_DURATION + STIKETHROUGH_OFFSET);
}
);
a.strikethrough {
position: relative;
overflow: hidden;
display: inline-block;
line-height: normal;
vertical-align: text-bottom;
border: none;
padding: 0;
color: #999;
&:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
width: 100%;
background: #000;
height: 1px;
transform: translateX(-110%);
transition: transform 0.3s ease-in-out;
}
&.mouseenter {
color: #000;
&:after {
transform: translateX(0);
}
}
&.mouseleave:after {
transform: translateX(110%);
}
&.no-transition:after {
transition: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment