淡入淡出/ css 类过渡发生乱序答案

【问题标题】：fade / css class transition happening out of order淡入淡出/ css 类过渡发生乱序
【发布时间】：2013-12-18 20:50:31
【问题描述】：

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

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

您可以在下面的链接中看到它。在幻灯片 1 和 2 之间发生了这种情况，但并不像从 a 类到 a 类的 css 变化那样明显。在幻灯片 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');

还是它们都同时执行？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

您的代码包括以下内容。

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

【讨论】：

这就是为什么在我的编辑中 setTimeout 回调起作用的原因。非常感谢您的解释！

【解决方案2】：

在javascript中的命令是按顺序执行的，问题是如果你在一个命令中出错，它可能会阻止整个脚本的执行。

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

每条语句由浏览器按照它们的顺序执行写的。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

编辑：呃，我猜这是真的大部分情况

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

【讨论】：