根據鼠標懸停顯示、隱藏，回復和引用按鈕

思路及原理

原理嘛很簡單，如果你閱讀過一頁或者兩頁甚至更多頁 Jquery 手冊的話，

那么下面的原理解釋你肯定能看懂，否則請跳至代碼實現區域閱讀。

思路很簡單，

將回復、引用按鈕放置在你想要的地方，CSS 樣式設置 display:none;

綁定Jquery中的hover動作到你想要鼠標懸停后顯示按鈕的區域

是不是很簡單？要是我以前寫博客肯定會就此結束，

好吧，既然授人魚那么繼續…….

特效的代碼實現部分

回復、引用的HTML代碼

代碼如下:

<div class="comment-act"><a href="#respond">回復</a> | <a href="#respond">引用</a></div>

回復、引用的CSS樣式設置

.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);

});

特效的代碼的加強、進階擴展

Jquery 特效的制作往往會碰到這么一種情況，

就是有一些極端的用戶，會不停的在兩個有懸停動畫特效的區域不停來回切換（搞測試？），

因為我們的特效顯示一般都會設定一個顯示時間，在這里我們設定了400毫秒，

很明顯，用戶的鼠標來回切換一次也就100毫秒左右，甚至更少，

不停的來回切換往往就會生成一個動畫隊列，即使你鼠標不動了，

特效還會按照你鼠標之前發生過的動作不停隱藏、顯示，直至響應完你最后一次鼠標動作，

雖然我說的這種情況不太多見，但是如果我們的評論條數很多，

而訪客又不停的上下滑動鼠標翻查內容，是不是很容易出現這種情況？

是不是很煩？

不但很煩，還會加重客戶端瀏覽器負載，影響網站效率，更是不好的用戶體驗。

問題解決其實很簡單，利用hover的回調函數參數終止動畫隊列，

$('li.comment').hover(//注1

function(){

$(this).find('div.comment-act').fadeIn(400);

},

function(){

$(this).find('div.comment-act').fadeOut(400,function(){$(this).stop(true);});

});

因為我們在移出鼠標的時候是想停止所有的動畫顯示，

所以我們在鼠標移出隱藏掉回復、引用按鈕之后終止掉該區域的動畫隊列。

實測，目前為止MG12的博客未對此種情況做處理（懶？沒必要？）。

你可以拿他的博客作為對比，呵呵！

注1：hover是一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法。這是一個自定義的方法，

它為頻繁使用的任務提供了一種“保持在其中”的狀態。

當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。

顯示、隱藏評論者信息

這個功能很多主題都有，旨在減小頁面篇幅、提高用戶體驗，我的這個主題本來也是預留了這個功能，但是因為鄙人懶所以一直沒有改造。最近這陣子小恙再加上本來也懶所以也一直沒有折騰博客，覺得再不折騰折騰博客興許就這么閑下來了。

望高手指正

JS代碼如下：

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

以上就是本文章的內容，希望對大家有所幫助