Question

我希望使用jquery jusgt为每个表行设置动画，就像闪烁效果一次一行一次。我试过下面的代码但是没有积极的结果。

$(document).ready(function() {
  setInterval(function() {
    var rowsCount = 0;
    var blinking_rows = [];
    $('#tblOne tbody tr').each(function() {
      $(this).animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
      });
    });
  }, 5000);
});

Answer 1

这是一个示例动画。每次调用setInterval中的函数时，表中的一行都是动画的

＆＃13;

$(document).ready(function() {
  var rowsCount = 0;
  var lenTable = 3;
  setInterval(function() {    
    $('#tblOne tbody tr').not(':eq(rowsCount)').animate({
      opacity: '1',
      fontSize: "12px",
    });
    $('#tblOne tbody tr').eq(rowsCount).animate({
      opacity: '0.5',
      fontSize: "48px",
    });
    rowsCount = (rowsCount + 1) % lenTable;
    console.log(rowsCount);
  }, 500);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="tblOne" style="width:100%">
  <tr>
    <td>&#9632;</td>
    <td>&#9632;</td>
    <td>&#9632;</td>
  </tr>
  <tr>
    <td>&#9632;</td>
    <td>&#9632;</td>
    <td>&#9632;</td>
  </tr>
  <tr>
    <td>&#9632;</td>
    <td>&#9632;</td>
    <td>&#9632;</td>
  </tr>
</table>

＆＃13;

Answer 2

$('#tblOne tbody').each(function(){...})

那怎么样？在 tbody tr 上“关注”而不是 tbody 之前。我不认为你的代码中有tr孩子。

我希望我是对的！

使用jquery为每个表行设置一次动画

2 个答案: