如何停止闪烁效果并将其替换为 jQuery UI 中的突出显示效果

How do I stop a blink effect and replace it with a highlight effect in jQuery UI?

本文关键字：UI 显示 jQuery 替换 闪烁 何停止      更新时间：2023-09-26

我有一个表格，其中一列中有链接。 我想将效果应用于页面上的另一个元素（使用悬停和单击事件），以便用户可以轻松看到他们已连接。

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>

  • 将鼠标悬停在链接上（鼠标悬停）会使用 jQuery 效果使相应的文本脉动。
    • 将鼠标移
  • 开（鼠标移出）可消除脉动效果
  • 单击链接可取消闪烁效果并将其替换为高亮效果

我的问题是：如何在不取消高光效果的情况下取消闪烁效果，以便在滚动到突出显示的项目后继续高光效果？

我认为这可以通过多种方式解决。

如何添加和删除类以突出显示？ 

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>

相关文章：