jQuery show() animations or effects?
I have some javascript hiding and showing some rows in my table every 2 seconds for example. But I want some effects or animations in jquery for: show(). I tried slideDown('slow') but it doesn't animate, not sure why? fadeIn('slow') works fine though but not slide?
My JavaScript
<script type="text/javascript">
var max = 0;
var index = 0;
$(function() {
max = $("tbody tr.hidden").length;
ticker();
});
function ticker() {
$("tbody tr.hidden:visible").hide();
var a = index;
var b = index + 1;
var c = index + 2;
$("tbody tr.hidden:hidden").filter(":eq(" + a + "), :eq(" + b + "), :eq(" + c + ")").show(1000); /* WANT TO ANIMATE THIS */
index += 3;
if (index>= max) index = 0;
setTimeout("ticker()", 2000);
$('tbody tr:visible:even').css('background-color', '#114c00');
}
</script>
My HTML
<table id="gradient-style" summary="Currency">
<thead>
<tr>
<th scope="col" class="flag"></th>
<th scope="col" class="currency"></th>
<th scope="col" class="title"></th>
<th scope="col" class="buy">We Buy</th>
<th scope="col" class="sell">We Sell</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">Logo Goes here?</td>
</tr>
</tfoot>
<tbody>
<tr id="fixed">
<td class="flags"><img src="flags/USD.png" /></td>
<td >USD</td>
<td>US DOLLAR</td>
<td class="value"><span>3.1</span></td>
<td class="value"><span>3.1</span></td>
</tr>
<tr id="fixed">
<td class="flags"><img src="flags/EUR.png" /></td>
<td>EUR</td>
<td>EURO</td&开发者_运维知识库gt;
<td class="value"><span>5.10</span></td>
<td class="value"><span>3.1</span></td>
</div>
<tr id="fixed">
<td class="flags"><img src="flags/JPY.png" /></td>
<td>JPY</td>
<td>JAPANESE YEN</td>
<td class="value"><span>8.10</span></td>
<td class="value"><span>3.1</span></td>
</tr>
<tr class="hidden">
<td class="flags"><img src="flags/CAD.png" /> </td>
<td>CAD</td>
<td>TEST1 DOLLAR</td>
<td class="value"><span>8.10</span></td>
<td class="value"><span>3.1</span></td>
</tr>
<tr class="hidden">
<td class="flags"><img src="flags/CNY.png" /> </td>
<td>CNY</td>
<td>TEST2 YUAN</td>
<td class="value"><span>8.10</span></td>
<td class="value"><span>3.1</span></td>
</tr>
<tr class="hidden">
<td class="flags"><img src="flags/USD.png" /> </td>
<td>CAD</td>
<td>TEST3 DOLLAR</td>
<td class="value"><span>8.10</span></td>
<td class="value"><span>3.1</span></td>
</tr>
<tr class="hidden">
<td class="flags"><img src="flags/CAD.png" /> </td>
<td>CAD</td>
<td>TEST4 DOLLAR</td>
<td class="value"><span>8.10</span></td>
<td class="value"><span>3.1</span></td>
</tr>
<tr class="hidden" >
<td class="flags"><img src="flags/CNY.png" /> </td>
<td>CNY</td>
<td>TEST5 YUAN</td>
<td class="value"><span>8.10</span></td>
<td class="value"><span>3.1</span></td>
</tr>
<tr class="hidden">
<td class="flags"><img src="flags/USD.png" /> </td>
<td>CAD</td>
<td>TEST6 DOLLAR</td>
<td class="value"><span>8.10</span></td>
<td class="value"><span>3.1</span></td>
</tr>
</tbody>
</table>
There are some things that won't work with a tr. Try doing the same thing, only with the td and th elements in the row.
try replacing setTimeout("ticker()", 2000);
with setInterval("ticker()", 2000);
The jQuery API shows that you can use 'slow' 'fast' or numbers as a parameter for most (if not all) time values. The "show" and "slideDown" methods work mostly the same.
So maybe your selector actually doesn't return anything?
try:
var selector = $("tbody tr.hidden:hidden").filter(":eq(" + a + "), :eq(" + b + "), :eq(" + c + ")");
alert(sizeof(selector));
to make sure you are selecting some elements
EDIT:
try this
$.each($("tbody tr.hidden:hidden").filter(":eq(" + a + "), :eq(" + b + "), :eq(" + c + ")"),function(i,val){
$(this).show(750);
});
精彩评论