Question

我有jQuery动画来显示数据。

你可以看到小提琴here

以下是HTML代码：

<ul>
    <li>List 1, Line 1</li>
    <li>List 1, Line 2</li>
    <li>List 1, Line 3</li>
</ul>
<ul>
    <li>List 2, Line 1</li>
    <li>List 2, Line 2</li>
    <li>List 2, Line 3</li>
</ul>
<ul>
    <li>List 2, Line 1</li>
    <li>List 2, Line 2</li>
    <li>List 2, Line 3</li>
</ul>

我有3 ul。

这是JS

var base_duration = 2000;
$('ul').each(function(i) {
    var li_count = $(this).children().length,
        hide_timeout = ((i+1) * base_duration * li_count);
    $(this).children().each(function(ii) {
        var li = $(this),
            show_timeout = (i * li_count * base_duration) + (ii * 
 base_duration);
        window.setTimeout(function() {
            li.animate({left:0, opacity:1})
        }, show_timeout);
        window.setTimeout(function() {
            li.animate({left:'100%', opacity:0})
        }, hide_timeout);
    });
});

我的问题是，如何在数据淡入时保持持续时间（正如您在演示中看到的那样，它显示得如此之快）？

Answer 1

您可以在speed函数中提供animate个动画。

请参阅此处的示例：http://jsfiddle.net/vineeshmp/zp240znv/396/

$listItems.eq(index).animate({left:0, opacity:1},1000, function() {
    AnimateList($listItems, index+1, callback)
});

speed属性可能的值：毫秒（100,1000,5000等），＆＃34;慢＆＃34;，＆＃34;快＆＃34;

Answer 2

尝试像这样修改。

$listItems.eq(index).animate({left:0, opacity:1}, 5000, function()

jQuery淡入淡出动画显示数据

2 个答案: