Question

我有一些javascript隐藏，例如每2秒在我的表中显示一些行。但是我想在jquery中使用一些效果或动画：show（）。我试过slideDown（'慢'），但它没有动画，不知道为什么？ fadeIn（'slow'）工作得很好，但没有滑动？

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

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

Answer 1

The jQuery API表示您可以使用'slow''fast'或数字作为大多数（如果不是全部）时间值的参数。 “show”和“slideDown”方法大致相同。

那么也许你的选择器实际上没有返回任何东西？

尝试：

var selector = $("tbody tr.hidden:hidden").filter(":eq(" + a + "), :eq(" + b + "), :eq(" + c + ")");
alert(sizeof(selector));

确保选择一些元素

编辑：

试试这个

$.each($("tbody tr.hidden:hidden").filter(":eq(" + a + "), :eq(" + b + "), :eq(" + c + ")"),function(i,val){
            $(this).show(750);
        });

Answer 2

有些东西不能用于tr。尝试做同样的事情，只用行中的第t和第t个元素。

Answer 3

尝试用setTimeout("ticker()", 2000);

替换setInterval("ticker()", 2000);

jQuery show（）动画或特效？

3 个答案: