Animation Link is underlined on click, not on hover?
Can't figure out how I can recreate this effect as a click and not a hover?
I'm not very good at jQuery, so I'm having trouble working out how I can get this to happen on click. I came across this site to help create the effect I'm going to (left to right underline). A demo can be seen at the following link ...
http://bradsknutson.com/blog/css-sliding-underline/
I am currently using the following js to fade in a div and I want the line to slide in them at the same time.
New jsfiddle - http://jsfiddle.net/tfgou78c/4/
JS:
$(function() {
$('.submit_button').click(function() {
var elem = $('.form_wrap');
if (elem.css('display') == 'none') {
elem.fadeIn(1750);
}
else {
elem.fadeOut(1750);
}
});
});
CSS:
.form_wrap {
display: none;
}
/* sliding underline LEFT TO RIGHT */
.sliding-u-l-r {
display: inline-block;
}
.sliding-u-l-r:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-u-l-r:hover:after {
width: 100%;
background: blue;
}
Any help would be greatly appreciated.
source to share
Since this method uses a CSS event :hover
, you cannot change this for click
code-only, because there is no method for CSS click
. You can:
-
You flag this with Jquery so you can change the CSS mapping:
.sliding-u-l-r:hover:after
to
.sliding-u-l-r.clicked:after
And then using JQuery:
$('.sliding-u-l-r').on('click',function(){ $(this).toggleClass('clicked'); })
Check Demo Script
source to share
Something like http://jsfiddle.net/y4wuurt9/ ?
$('.underline-thing').on('click', function(e) {
e.preventDefault();
$(this).addClass('lined');
});
.underline-thing {
position: relative;
text-decoration: none;
}
.underline-thing:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background: blue;
-webkit-transition: width 250ms ease-in-out;
-moz-transition: width 250ms ease-in-out;
-o-transition: width 250ms ease-in-out;
transition: width 250ms ease-in-out;
}
.underline-thing.lined:after {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="underline-thing" href="#">Test Link</a>
source to share
On click you don't want him to stay, do you?
Here's a clean version of the css that's underlined when clicked:
a:active{
text-decoration:underline;
}
a{
text-decoration:none;
}
<a href="#">click me and hold!</a>
source to share