Hi
I would like to create an effect where on hover on a span class with text in it, a line under the text gradually 'grows' underneath it. Like an underlined text, where the underline increases in width.
Here's the css:
.border {
background-image: url('img/border.jpg');
background-size: 0px 1px;
background-repeat: no-repeat;
}
Here's the HTML:
<span class='border'>my link</span>
And here's the (simplified) JS:
var textLinks = $('.border');
textLinks.each(function(index) {
var targetItem = textLinks.eq(index);
targetItem.on("mouseenter", function(event) {
TweenLite.killTweensOf(targetItem);
TweenLite.to(targetItem, 1, {css:'background-size:10px 1px', ease:Sine.easeOut});
});
targetItem.on("mouseleave", function(event) {
TweenLite.killTweensOf(targetItem);
TweenLite.to(targetItem, 1, {css:'background-size:0px 1px', ease:Sine.easeOut});
});
});
On mouseenter everything works fine, the line animaties.
On mouseleave however nothing happens (although the mouseleave event is triggered when I log it in my console).
Anyone knows what the problem is?
Thanks.