开发者

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);
        });
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜