Question

我开始学习Javascript和jQuery。我想用jQuery做一个简单的幻灯片放映，逐个显示列表无序列表项。

我的代码在这里：on jsfiddle

我以为我会通过迭代for循环中的列表项来制作幻灯片，并使用fadeIn和fadeOut效果显示它们，如下所示：

for(var i = 0; i < 3; i++)
{
    $('#slider li:nth-child('+ i +')')
        .fadeIn()
        .delay(1000)
        .fadeOut();
}

但它只显示列表中的最后一项。

我读到我需要在单独的函数中关闭i变量的值，因为它看到Javascript范围，i的值在循环中增加到2。所以，我创建了一个单独的函数来关闭i的值并调用该函数。但它仍然相同，显示列表的最后一项。

所以，我只是想在没有循环的情况下尝试对列表项进行两个单独的效果，如下所示：

$('#slider li:first-child')
    .fadeIn()
    .delay(1000)
    .fadeOut();
$('#slider li:nth-child(2)')
    .fadeIn()
    .delay(1000)
    .fadeOut();

但它不会像上面所写的那样按顺序显示列表项。当您运行代码时，似乎第一个项目显示得非常快，最后一个项目按预期显示。

我把它写成C或Java代码，认为它会从上到下执行。但似乎Javascript是不同的，我不理解Javascript的关键概念。

所以，我的问题是为什么它没有按顺序显示列表项目，只显示最后一项，以及我需要知道什么才能使它按预期工作。

谢谢。

Answer 1

由于您的工作原因尚未解决，我已为您设置了一个新的fiddle，其中包含以下工作幻灯片代码和评论说明：

$('#slider li').hide();

// Method 3
var slideIt = function ( which ) {
    $('#slider li:nth-child('+ which +')')
        .fadeIn(300)
        .delay(1000)
        .fadeOut(300, function() { // after animation complete
            which++; // increment which child
            which = (which > $('#slider li').length) ?
                    1 : // if last child loop back to beginning
                    which;
            slideIt( which ); // call again with new child
        });
};

slideIt( 1 ); // start the process

Answer 2

通过使用对setTimeout（）/ setInterval（）的许多增量调用在幕后实现动画，这基本上只是将未来的任务排队。因此，您在代码中进行的实际函数调用不是同步操作，它们都在一微秒内完成，许多未来的任务都被排队。

这显示它好一点，第二个动画被安排在未来足够远的地方开始，以免干扰。

for(var i = 0; i < 3; i++)
{
    $('#slider li:nth-child('+ i +')')
        .delay(2000 * i)
        .fadeIn()
        .delay(1000)
        .fadeOut();
}

我在jquery中没有做太多动画，但我知道一些动画函数接受一个函数作为参数，一旦它的动画结束就会被调用。这使得更容易进行连续动画，因为你不需要做时间/数学计算技巧。

至于为什么这样做 - javascript是单线程的，并且不能快速完成的同步操作可以轻松阻止ui。所以你必须捏造它并将其排队，浏览器就是这样做的。

Answer 3

一个更简单的方法是

$(document).ready(function () {
    $('#slider li:gt(0)').hide();
    setInterval(
        function () {
            $('#slider li:first-child')
                .fadeOut()
                .next('li')
                .fadeIn()
                .end()
                .appendTo('#slider');
        }
    , 3000);
});

它使用JavaScript SetInterval方法。

你可以view the code in action here

P.S：jQuery的:nth-child(n)实现严格来自CSS规范，n的值是“1-indexed”

javascript执行顺序

3 个答案: