Implementation of showing and hiding comments and quote buttons on mouse hover in WordPress_javascript skills

Show, hide, reply and quote buttons based on mouseover
Ideas and principles
The principle is very simple. If you have read one, two or even more pages of the Jquery manual,
Then you will definitely understand the following explanation of principles, otherwise please jump to the code implementation area to read.
The idea is very simple,

Place the reply and quote buttons where you want, and set the CSS style to display:none;
Bind the hover action in Jquery to the area where you want the button to be displayed after the mouse hovers
Isn't it very simple? If I had blogged before, I would have ended here,
Okay, now that we’re teaching mermaids, let’s continue…….

Code implementation part of special effects
HTML code for replies and quotes

Copy code The code is as follows:

 

Reply | Quote

CSS style settings for replies and quotes

   .comment-act{display:none;}
Jquery（ Javascript ） 代码部分
注：li.comment 是我每一条评论所在的区域
   $('li.comment').hover(//注1
 function(){
 $(this).find('div.comment-act').fadeIn(400);
 },
 function(){
 $(this).find('div.comment-act').fadeOut(400);
 });

Enhancement and advanced expansion of special effects code
The production of Jquery special effects often encounters such a situation,
There are some extreme users who keep switching back and forth between two areas with hover animation effects (testing?),
Because our special effects display usually sets a display time, here we set 400 milliseconds,
Obviously, it only takes about 100 milliseconds for the user's mouse to switch back and forth, or even less,
Constantly switching back and forth often generates an animation queue, even if your mouse is not moving,
The special effects will also be hidden and displayed according to the previous mouse movements until it responds to your last mouse movement,
Although the situation I mentioned is not common, if we have a lot of comments,
And visitors keep sliding their mouse up and down to browse the content. Is it easy for this to happen?
Isn’t it annoying?
Not only is it annoying, it also increases the load on the client browser, affects website efficiency, and creates a bad user experience.
The solution to the problem is actually very simple. Use the callback function parameter of hover to terminate the animation queue,

   $('li.comment').hover(//注1
 function(){
 $(this).find('div.comment-act').fadeIn(400);
 },
 function(){
 $(this).find('div.comment-act').fadeOut(400,function(){$(this).stop(true);});
 });

Because we want to stop all animations when we move the mouse out,
So we terminate the animation queue in this area after the mouse moves out to hide the reply and reference buttons.
According to actual measurement, MG12’s blog has not dealt with this situation so far (lazy? unnecessary?).
You can use his blog as a comparison, haha!
Note 1: hover is a method that simulates hover events (the mouse moves over and out of an object). This is a custom method,
It provides a "keep in it" state for frequently used tasks.
When the mouse moves over a matching element, the first specified function will be triggered. When the mouse moves out of this element, the specified second function will be triggered.

Show and hide commenter information
Many themes have this function, which is designed to reduce page length and improve user experience. My theme originally reserved this function, but I haven’t modified it because I am lazy. I've been ill recently and I'm lazy, so I haven't bothered with blogging. I feel that if I don't bother with blogging, I might just be free.

Hope for expert correction
The JS code is as follows:

 var cmtinfo = jQuery('#cmtinfo');
if (cmtinfo.length>0){
var hideinfo = cmtinfo.find('#hide_author_info');
var showinfo = cmtinfo.find('#show_author_info');
var authorinfo = jQuery('#author_info');
authorinfo.hide();
showinfo.click(function(){jQuery(this).fadeOut(function(){hideinfo.fadeIn();});authorinfo.fadeIn();});
hideinfo.click(function(){jQuery(this).fadeOut(function(){showinfo.fadeIn();});authorinfo.fadeOut();});
}

#cmtinfo 是有信息的访客所显示访客新的一个 DIV

#hide_author_info、#show_author_info 一个是隐藏按钮一个是显示按钮

#author_info 是 #cmtinfo 的一个子 DIV