如何在 jQuery UI 中停止闪烁效果并将其替换为高亮效果？

Question

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

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>

将鼠标悬停在 link 上（鼠标悬停）使相应的文本使用 jQuery 效果跳动。
将鼠标移开 (onmouseout) 取消脉动效果
点击link取消blink效果，取而代之的是高亮效果

我的问题是：如何在不取消高亮效果的情况下取消blink效果使高亮滚动到突出显示的项目后效果继续？

Answer 1

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

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

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 UI 中停止闪烁效果并将其替换为高亮效果？

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

javascript

jquery

jquery-ui

jquery-effects