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

Posted 2023-03-07

技术标签:

【中文标题】淡入淡出/ css 类过渡发生乱序【英文标题】：fade / css class transition happening out of order 【发布时间】：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');

还是它们都同时执行？

【问题讨论】：

【参考方案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