WordPress中滑鼠移至上方顯示和隱藏評論及引用按鈕的實現，wordpress懸停

WordPress中滑鼠移至上方顯示和隱藏評論及引用按鈕的實現，wordpress懸停

根據滑鼠移至上方顯示、隱藏，回複和引用按鈕
思路及原理
原理嘛很簡單，如果你閱讀過一頁或者兩頁甚至更多頁 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

您可能感興趣的文章:

• WordPress中利用AJAX技術進行評論提交的實現樣本
• 最佳化WordPress中文章與評論的時間顯示
• WordPress中利用AJAX非同步擷取評論帳戶圖片的方法
• 詳解WordPress中調用評論模板和迴圈輸出評論的PHP函數
• WordPress中限制非管理使用者在文章後只能評論一次
• 講解WordPress中用於擷取評論模板和搜尋表單的PHP函數
• 解決WordPress使用CDN後博文無法評論的錯誤
• 利用jQuery實現WordPress中@的ID懸浮顯示評論內容
• 編寫PHP指令碼來實現WordPress中評論分頁的功能
• 修改PHP指令碼使WordPress攔截垃圾評論的方法樣本
• 在WordPress中實現評論頭像的自訂預設和消極式載入
• WordPress中對訪客評論功能的一些最佳化方法