使用jquery動畫每個表格行一次使用jquery

我想動畫每個表格行一次使用jquery jusgt，就像一次閃爍的效果一次一行。我已經嘗試下面的代碼，但沒有積極的結果。使用jquery動畫每個表格行一次使用jquery

$(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); 
});

來源

2016-03-06 Pankaj Vasnani

代碼缺失？ – user2314737

$（文件）。就緒（函數（）{ 的setInterval（函數（）{ \t變種rowsCount \t \t = 0; \t變種blinking_rows = []; \t $（ '＃tblOne TBODY TR'）每個（。函數（）{ \t $（本）.animate（{ \t \t左： '250像素'， \t不透明度： '0.5'， \t \t高度： '150像素'， \t \t寬度： '150像素' \t \t}）; \t}）; 5000）; }）; –

這是我的代碼。 –

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

怎麼樣？ tbody tr不適用tbody。我不認爲tr在你的代碼中有任何tr孩子。

我希望我是對的！

來源

2016-03-06 07:22:30 xetra11

你說得對。但我的邏輯是在第一排動畫，然後延遲第二排動畫等。 –

啊好，所以一排內的一切應該動畫...現在我明白了 – xetra11

這是一個示例動畫。每次在setInterval函數被調用，在表中的一行是動畫

$(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); 
 
});

<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>

來源

2016-03-06 07:52:27 user2314737

謝謝。它爲我工作。 –

使用jquery動畫每個表格行一次使用jquery

回答

相關問題