Animate Link点击下划线，而不是悬停？ [英] Animate Link underline on click as opposed to on hover?

问题描述

遇到麻烦，我不知道如何重新创建这个效果作为一个点击而不是悬停？

我不是很好用jQuery所以有麻烦工作如何我可以触发这种情况发生在点击。我遇到了这个网站，以帮助创建我要去的效果（下划线从左到右）。该演示可以在以下链接中看到...

http://bradsknutson.com/blog/css-sliding-underline/

我目前正在使用以下js

新的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：

 code> .form_wrap {
 display：none; 
} 
 
 / *滑动下划线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; 
} 
  

任何帮助将非常感激。

<因为这个方法使用CSS事件：hover ，你不能改变单击只是在代码上，因为没有方法单击在CSS。您可以拥有：

1. 您使用Jquery标记此标记，以便您可以将CSS匹配更改为：

     .sliding-ulr：hover：after 
     

   
   $ b b

   到

     .sliding-ulr.clicked：after 
     pre> 
    
    
   然后使用Jquery：
     $ -ul-r'）。on（'click'，function（）{
    $（this）.toggleClass（'clicked'）; 
   }）
     
   请检查此演示小说 
    

Having trouble getting my head around how I can recreate this effect as an on click as opposed to on hover?

I'm not great with jQuery so having trouble working out how I can trigger this to happen on click. I came across this website to help create the effect I'm going for (Underline Left to Right). The demo can be seen in the following link...

http://bradsknutson.com/blog/css-sliding-underline/

I'm currently using the following js to fade in a div and I want the line to slide in at them 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.

解决方案

Since this method are using the CSS event :hover you can't change that for click just on the code because there is no method for click on CSS. You can have:

1. You tag this with Jquery so you can change the CSS match to:

   .sliding-u-l-r:hover:after
   

   to

   .sliding-u-l-r.clicked:after
   

   And then with Jquery:

   $('.sliding-u-l-r').on('click',function(){
      $(this).toggleClass('clicked');
   })
   

   Check this Demo Fiddle

这篇关于Animate Link点击下划线，而不是悬停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！