jQuery技术:Animate Link点击下划线而不是hover？

我无法理解如何在点击时重新创建此效果而不是hover？

我对jQuery不是很好，因此无法弄清楚如何在点击时触发这种情况。 我遇到了这个网站，以帮助创建我想要的效果（从左到右下划线）。 该演示可以在以下链接中看到……

我目前正在使用以下js淡入div，我希望该行同时滑入它们。

新jsfiddle – https://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-ulr { display: inline-block; } .sliding-ulr:after { content: ''; display: block; height: 3px; width: 0; background: transparent; transition: width .5s ease, background-color .5s ease; } .sliding-ulr:hover:after { width: 100%; background: blue; } 

任何帮助将不胜感激。

 $('.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%; } 

  Test Link 

 a:active{ text-decoration:underline; } a{ text-decoration:none; } 

 click me and hold! 

以上就是jQuery教程分享Animate Link点击下划线而不是hover？相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。