Here is an example:
$(function(){
var x = 0;
setInterval(function(){
x-=1;
$(".link-wavy:hover").css('background-position', x + 'px 100%');
}, 20);
})body {
font-family: 'Source Sans Pro', sans-serif;
color: #000;
font-size: 1em;
line-height: 1.6em;
font-weight: 400;
}
a {
text-decoration: none;
}
.link-contact {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
color: #000;
}
.link-wavy {
padding-bottom: 9px;
background-image: url("http://uploads.webflow.com/56d8a8f1100bc1bb7928eebd/5831d10096c13a1f491ac02d_wavy-k.png");
background-position: -50px 100%;
background-size: 230px;
background-repeat: repeat-x;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="link-contact w-inline-block" href="http://google.com">
<div class="link-wavy">wavvvvvvy baby</div>
</a>This code demonstrates moving the background image continuously on hover for a wave effect.
However, I am seeking more advanced techniques in jQuery to enhance this motion. Specifically, adding ease in-out on hover and ensuring the wave starts where it stops when no longer hovered over (to avoid a sudden jump reset).
If you have any suggestions or ideas, they would be greatly appreciated. Thank you!