Jquery button automatically highlight the implementation of the principle and code

  • 2020-03-30 02:45:00
  • OfStack

The principle is very simple, when we click we add a custom attr to the element, add it, there will be a matching style to automatically adapt the background, after a few seconds to remove the style back to the original

Start by extending a method called hoverEl in your own js
$.extend($.fn, { 

var _this = $(this); 
var _t = setTimeout(function(){ 
_this.attr("hover", "on"); 
}, 10); 
_this.attr("hoverTimeout", _t); 

clearTimeout( _this.attr("hoverTimeout") ); 
var _t = setTimeout(function(){ 
}, 100); 
_this.attr("hoverTimeout", _t); 


Next, define the style when a particular attr is added
background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#194FDB), to(#4286F5))!important; 
background-image: -webkit-linear-gradient(top, #4286F5, #194FDB)!important; 
color: white!important; 
cursor: pointer!important; 

Call example:

Related articles: