WordPress mouse Hover Display and hide comments and reference buttons to achieve _javascript skills

Show, hide, reply, and reference buttons based on mouse hover
Ideas and principles
The principle is simple, if you read a page or two or more pages of Jquery manual,
Then the following principle explains that you can definitely understand, otherwise please jump to the code implementation area to read.
The idea is simple,

Place the reply, reference button where you want it, CSS style settings display:none;
Bind the hover action in jquery to the area where you want the button to appear after the mouse hovers over it
Is it simple? If I had written a blog before, it would've ended.
Well, now that the mermaid continues ...

Code implementation part of the effect
Reply, referenced HTML code

Copy Code code as follows:

<div class= "comment-act" ><a href= "#respond" > Reply </a> | <a href= "#respond" > References </a></div>

Reply, referenced CSS style settings

   . Comment-act{display:none;}
Jquery (Javascript) Code section
Note: Li.comment is the area of my every comment
   $ (' li.comment '). Hover (//NOTE 1
 function () {
 $ (this) . Find (' Div.comment-act '). FadeIn:
 },
 function () {
 $ (this). Find (' Div.comment-act '). fadeout ();
 });

Enhanced, advanced extension of the Code for special effects
The production of Jquery effects often comes across a situation where
There are some extreme users who are constantly switching back and forth in two areas with a hover animation effect (for testing?). ），
Because our effect display usually sets a display time, where we set 400 milliseconds,
Obviously, the user's mouse switch back and forth is about 100 milliseconds or less,
Constantly switching back and forth often generates an animated queue, and even if you don't move the mouse,
The effects will also follow the actions of your mouse to hide, display, until the response to the end of your last mouse action,
I don't see much of that, but if we have a lot of comments,
And visitors are constantly sliding up and down the mouse to check the content, is it easy to appear this kind of situation?
Is it annoying?
Not only annoying, but also can aggravate the client browser load, affect the efficiency of the site, is not a good user experience.
Problem solving is actually very simple, using hover callback function parameters to terminate the animation queue,

   $ (' li.comment '). Hover (//NOTE 1
 function () {
 $ (this). Find (' Div.comment-act '). FadeIn ();
 function () {
 $ (this). Find (' Div.comment-act '). Fadeout (400,function () {$ (this). Stop (True);});
 

Because when we move out of the mouse, we want to stop all the animated display,
So we terminate the animation queue in the area after the mouse is moved out of hiding the reply and the reference button.
Measured, so far MG12 's blog does not deal with this kind of situation (lazy?) No need? ）。
You can take his blog as a contrast, hehe!
Note 1:hover is a way to mimic a hover event (the mouse moves over an object and removes it). This is a custom method,
It provides a "stay in" state for frequently used tasks.
When the mouse is moved above a matching element, the first specified function is triggered. When the mouse moves out of this element, the specified second function is triggered.

Show, hide reviewer information
This feature has many themes, designed to reduce page length, improve the user experience, my theme is also reserved for this feature, but because I am lazy so has not been modified. Recently, and the recent indisposition and also lazy so also has not toss blog, feel no Toss toss blog may be so idle down.

Look at the high finger is
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 a visitor with information displayed a new DIV

#hide_author_info, #show_author_info One is a hidden button one is a display button

#author_info is #cmtinfo A child DIV