Question

我想要淡出几个页面元素。然后我改变它们的css类（虽然它们不可见）然后将它们淡入。

我以为我已经正确地命令了执行流程但是在fadeOut完成之前确实已经发生了css类转换。视觉上发生的是一个人看到css变化然后发生淡出。

您可以在下面的链接中看到它。幻灯片1和幻灯片之间2它发生但不像css变化从a类到a类那样明显。幻灯片2和幻灯片2之间3你可以看到它是从a类到b类。

http://staging.alexandredairy.com

jquery转换代码onReady启动它：

var txtread = 
{
    onReady: function(_imgname)
    {
        txtread.fadeoutText(_imgname);

        txtread.fadeinText();
    },

    fadeoutText: function(_imgname)
    {
        $("#pagetitle").fadeOut(1250);
        $("#pagemenu").fadeOut(1250);
        $("#pageslogan").fadeOut(1250);
        $("#sitecopy").fadeOut(1550, txtread.TextReadabilityHandler(_imgname));
    },

    fadeinText: function()
    {
        $("#pagetitle").fadeIn(1250);
        $("#pagemenu").fadeIn(1250);
        $("#pageslogan").fadeIn(1250);
        $("#sitecopy").fadeIn(1250);
    },

    TextReadabilityHandler: function(_imgNameSwitch)
    {
        if(_imgNameSwitch == 'Light')
        {
            $("#pagetitle").attr('class', 'sitetitle lighttextbackground');
            $("#pagemenu").attr('class', 'sf-menu lighttextbackground');
            $("#pageslogan").attr('class', 'slogan lighttextbackground');
        }
        else if (_imgNameSwitch == 'Dark_')
        {
            $("#pagetitle").attr('class', 'sitetitle darktextbackground');
            $("#pagemenu").attr('class', 'sf-menu darktextbackground');
            $("#pageslogan").attr('class', 'slogan darktextbackground');
        }
        else
        { alert(_imgNameSwitch); }
    }
}

所以我认为执行的顺序，更长的fadeOut，以及最后设置fadeOut完成的功能会保持秩序，但唉。我错了。

谢谢

修改

所以现在我尝试了window.setTimeout，它的行为与超时甚至不运行完全相同???

好吧，我的坏。我最初尝试过：

window.setTimeout(txtread.TextReadabilityHandler(_imgname), 3000);

并没有错误或工作。然后我回去重新读了一点，看到使用回调，所以我用这种方式重写：

window.setTimeout(function(){ txtread.TextReadabilityHandler(_imgname); }, 3000);

现在它正在运作。

我原来的问题仍然适用。我理解javascript是一种异步编程语言但是必不可少？也许我在脑子里弄错了。

以下是否一个接一个地执行：

alert('1');
alert('2');
alert('3');

还是一次性执行？

Answer 1

警报将按顺序执行。 Javascript是单线程的。

编辑：呃，我猜大多数情况下都是

查看此链接以获得良好的探索，特别是关于淡入淡出等。 Is JavaScript guaranteed to be single-threaded?

Answer 2

您的代码包含以下内容。

onReady: function(_imgname)
{
    txtread.fadeoutText(_imgname);
    txtread.fadeinText();
}

您认为txtread.fadeinText()在txtread.fadeoutText(_imgname)完成之前不会运行是正确的。但是，fadetextOut在您预期之前就已完成。

fadeoutText: function(_imgname)
{
    $("#pagetitle").fadeOut(1250);
    $("#pagemenu").fadeOut(1250);
    $("#pageslogan").fadeOut(1250);
    $("#sitecopy").fadeOut(1550, txtread.TextReadabilityHandler(_imgname));
}

几乎立即返回，告诉各个元素在一段时间内淡出。因此，调用txtread.fadeinText()不会等待这些元素淡出。

您需要向fadeinText和fadeoutText添加某种形式的回调，您可以使用这些回调让其他代码知道他们已完成，就像这样。

onReady: function(_imgname)
{
    txtread.fadeoutText(_imgname, function () {
        txtread.fadeinText();
    });
}

fadeoutText: function(_imgname, cb)
{
    $("#pagetitle").fadeOut(1250);
    $("#pagemenu").fadeOut(1250);
    $("#pageslogan").fadeOut(1250);
    $("#sitecopy").fadeOut(1550, function() {
        txtread.TextReadabilityHandler(_imgname);
        cb();
    });
}

fadeinText: function(cb)
{
    $("#pagetitle").fadeIn(1250);
    $("#pagemenu").fadeIn(1250);
    $("#pageslogan").fadeIn(1250);
    $("#sitecopy").fadeIn(1250, cb);
}

Answer 3

正如迈克尔所说，javascript将同时运行。所以，运行你的fadeout函数，然后，一旦完成，调用csschange函数，一旦完成，运行淡入函数。

我可以在jQuery中编写这个（因为很容易添加一个函数在另一个完成后运行）。在简单的js中它应该是直截了当的，我只是不太熟悉语法。。

Answer 4

在javascript命令中按顺序执行，问题是如果你只在一个命令中有错误，它可以阻止整个脚本执行。

http://www.w3schools.com/js/js_statements.asp

每个语句都由浏览器按顺序执行写入。

fade / css类转换发生故障

修改

4 个答案: