Question

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

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效果使相应的文本脉动。
移开鼠标（onmouseout）取消脉动效果
点击链接取消闪烁效果并将其替换为高亮效果

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

Answer 1

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

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

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

1 个答案: