Search code examples
javascriptjqueryjquery-uijquery-effects

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

I have a table with links in one of the columns. I want to apply effects to another element on the page (using the hover & click events) so that the user can easily see that they are connected.

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>

  • hover over a link (onmouseover) makes the corresponding text pulsate using jQuery effects.
  • move the mouse away (onmouseout) cancels the pulsate effect
  • click on the link cancels the blink effect and replaces it with the highlight effect

My question is: How do I cancel the blink effect without cancelling the highlight effect so that the highlight effect continues after I scroll to the highlighted item?

Solution

  • I think this could be resolved on many ways.

    How about adding and removing class for highlighting? 

    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>