如何使用jquery使表行闪烁

时间:2018-02-06 09:21:17

标签: javascript jquery html css

我找到一个样本,其中CSS用于闪烁表格行,但我不想使用CSS。相反,我想使用jQuery。这是我得到的样本:

body {
  padding: 25px;
}

@-webkit-keyframes blink {
  50% {
    background: rgba(255, 0, 0, 0.5);
  }
}

@-moz-keyframes blink {
  50% {
    background: rgba(255, 0, 0, 0.5);
  }
}

@keyframes blink {
  50% {
    background: rgba(255, 0, 0, 0.5);
  }
}

.blink {
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: blink;
  -webkit-animation-timing-function: linear;
  -moz-animation-direction: normal;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-name: blink;
  -moz-animation-timing-function: linear;
  animation-direction: normal;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-name: blink;
  animation-timing-function: linear;
}

table {
  width: 100%;
}

table tr:nth-child(odd) {
  background: gray;
}
<table>
  <tr class='odd blink'>
    <td>First row, very important.</td>
  </tr>
  <tr>
    <td>Second row</td>
  </tr>
  <tr class='odd'>
    <td>Third row</td>
  </tr>
  <tr>
    <td>Fourth row</td>
  </tr>
  <tr class='odd'>
    <td>Fifth row</td>
  </tr>
  <tr class='blink'>
    <td>Sixth row, also important</td>
  </tr>
</table>

jsFiddle链接:http://jsfiddle.net/tridip/mc2fb8ag/

请告诉我如何用jQuery获得同样漂亮的表格行闪烁效果。

0 个答案:

没有答案