Implementation of the mouse hover button in WordPress to show and hide comments and references

Show, hide, Reply and reference buttons according to mouse hover
Ideas and Principles
The principle is simple. If you've read one or two or more pages of the Jquery manual,
You should be able to understand the following principles, or skip to the code implementation area.
The idea is simple,

Place the reply and reference buttons where you want, CSS style display:none;
Bind the hover action in Jquery to the area where you want the button to be displayed when the mouse hovers over
Isn't that easy? If I had ever written a blog I would have ended it,
Well, since I'm giving a mermaid then go on... .

The code implementation part of the effect
Reply and reference the HTML code

      <div class="comment-act"><a href="#respond"> reply </a> | <a href="#respond"> reference </a></div>

CSS style Settings for reply and reference

   .comment-act{display:none;}
Jquery (  Javascript  )   Code section 
 Note: li.comment  Is my every 1 The area where the comment is 
   $('li.comment').hover(// note 1
 function(){
 $(this).find('div.comment-act').fadeIn(400);
 },
 function(){
 $(this).find('div.comment-act').fadeOut(400);
 });

Enhancements and advanced extensions to the effects' code
In the production of Jquery special effects, there is often a situation like this.
Some extreme users will constantly switch back and forth between two areas with hover animation effects. .
Because our special effects display 1 usually sets a display time, in this case we set 400 milliseconds,
Obviously, a user can switch back and forth for 100 milliseconds or less,
Switching back and forth often creates an animation queue, even if you don't move the mouse,
The special effects will also hide and display according to the previous actions of your mouse until the response of your last mouse action is completed.
I'm not saying that often, but if we get a lot of comments,
Is it easy for visitors to keep scrolling up and down to check the content?
Isn't it annoying?
Not only is it annoying, but it also aggravates the load on the client browser, impinges on the efficiency of the site, and makes for a bad user experience.
The solution is actually quite simple, using the callback function parameters of hover to terminate the animation queue,

   $('li.comment').hover(// note 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 the animation when we move the mouse,
So we terminate the animated queue in this area after we move the mouse over the hidden reply and reference buttons.
Actual measurement, so far MG12 blogs do not deal with this situation (lazy? Not necessary?) .
You can compare his blog, hehe!
Note 1: hover is a method that mimics a hover event (moving the mouse over and out of an object). This is a custom method,
It provides a "stay in" state for frequently used tasks.
When the mouse cursor moves over a matching element, the specified first function is triggered. The specified second function is triggered when the mouse pointer is moved out of the element.

Show and hide commenter information
This feature is available in many themes, aiming to reduce page length and improve user experience. This feature was originally reserved in my theme, but I didn't change it because I am lazy. Recently, I have been a little sick and lazy, so I haven't been doing anything to my blog. If I don't do anything to my blog, I may be so free.

Look at the master correct
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  Is the visitor with information displayed by the visitor new 1 a  DIV

#hide_author_info , #show_author_info 1 One is the hide button 1 One is the display button 

#author_info  is  #cmtinfo  the 1 a 子 DIV