如何在jQuery UI中停止眨眼效果並將其替換為突出顯示效果？
[英]How do I stop a blink effect and replace it with a highlight effect in jQuery UI?
問題描述
我在其中一列中有一個帶有鏈接的表。 我想將效果應用於頁面上的另一個元素（使用懸停和單擊事件），以便用戶可以輕松看到它們已連接。
function HighlightRow(urlId) { StopPulsateRow(urlId); $('#' + urlId).effect("highlight", {}, 10000); $('html,body').animate({ scrollTop: $('#' + urlId).offset().top - ($(window).height() - $('#' + urlId).outerHeight(true)) / 2 }, 200); } function StopPulsateRow(urlId) { // I need to cancel the effect but only cancel the pulsate effect $('#' + urlId).stop(true, true).effect("pulsate", { times: 1 }, 1); } function PulsateRow(urlId) { $('#' + urlId).effect("pulsate", { times: 5 }, 1000); }
body { font-family: Arial; }
<link href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <body> <table> <thead> <tr> <th>URL</th> </tr> </thead> <tr> <td><a onmouseover="PulsateRow(1);" onmouseout="StopPulsateRow(1);" onclick="HighlightRow(1);">http://www.google.com</a> </td> </tr> <tr> <td><a onmouseover="PulsateRow(2);" onmouseout="StopPulsateRow(2);" onclick="HighlightRow(2);">http://www.google.co.uk</a> </td> </tr> <tr> <td><a onmouseover="PulsateRow(3);" onmouseout="StopPulsateRow(3);" onclick="HighlightRow(3);">http://www.google.ie</a> </td> </tr> </table> <h3>Details</h3> <table class="table"> <tr> <td id="1">Google Global </td> </tr> <tr> <td id="2">Google UK </td> </tr> <tr> <td id="3">Google Ireland </td> </tr> </table> </body>
- 將鼠標懸停在鏈接上（onmouseover）可使用jQuery效果使相應的文本跳動。
- 將鼠標移開（鼠標移開）可取消脈動效果
- 單擊該鏈接可取消閃爍效果，並將其替換為突出顯示效果
我的問題是：如何在不取消突出顯示效果的情況下取消閃爍效果，以便在滾動到突出顯示的項目后繼續突出顯示效果？
1 個解決方案
解決方案1
0 已采納 2016-03-01 10:33:27
我認為這可以通過多種方式解決。
如何添加和刪除要突出顯示的類？
function HighlightRow(urlId) { StopPulsateRow(urlId); if ($('#' + urlId).hasClass("highlight")) { $('#' + urlId).removeClass("highlight"); } else { $('#' + urlId).addClass("highlight"); } $('#' + urlId).effect("highlight", {complete: function(){$(this).removeClass("highlight")}}, 10000).delay(10000); $('html,body').animate({ scrollTop: $('#' + urlId).offset().top - ($(window).height() - $('#' + urlId).outerHeight(true)) / 2 }, 200); } function StopPulsateRow(urlId) { if (false === $('#' + urlId).hasClass("highlight")) { // I need to cancel the effect but only cancel the pulsate effect $('#' + urlId).stop(true, true).effect("pulsate", { times: 1 }, 1); } } function PulsateRow(urlId) { if (false === $('#' + urlId).hasClass("highlight")) { $('#' + urlId).effect("pulsate", { times: 5 }, 1000); } }
body { font-family: Arial; }
<link href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <body> <table> <thead> <tr> <th>URL</th> </tr> </thead> <tr> <td><a onmouseover="PulsateRow(1);" onmouseout="StopPulsateRow(1);" onclick="HighlightRow(1);">http://www.google.com</a> </td> </tr> <tr> <td><a onmouseover="PulsateRow(2);" onmouseout="StopPulsateRow(2);" onclick="HighlightRow(2);">http://www.google.co.uk</a> </td> </tr> <tr> <td><a onmouseover="PulsateRow(3);" onmouseout="StopPulsateRow(3);" onclick="HighlightRow(3);">http://www.google.ie</a> </td> </tr> </table> <h3>Details</h3> <table class="table"> <tr> <td id="1">Google Global </td> </tr> <tr> <td id="2">Google UK </td> </tr> <tr> <td id="3">Google Ireland </td> </tr> </table> </body>
如何在jQuery中停止效果
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.