添加css后如何运行jquery函数答案

【问题标题】：How to run a jquery function after i added css添加css后如何运行jquery函数
【发布时间】：2011-03-30 19:35:08
【问题描述】：

我有这行：

$('body>header:last a,body>header:last div,body>header:last h1').css("-webkit-transition", "opacity 0.5s ease-in");

并且我希望在添加该样式之后运行其余的 javascript。我目前使用计时器

setTimeout(function () {
                    $('body>header:not(:last),body>footer:not(:last),body>#content:not(:last)').remove();                   
                    $('body>header,body>footer,body>#content').removeAttr('style'); },1000);

但不知何故，当计时器执行时而不是在它之前添加 css。知道为什么会这样吗？如果没有，是否有办法在添加 css 后强制超时功能运行

【问题讨论】：

您的意思是您希望 JavaScript 代码在 CSS 转换完成后执行？我不认为这是可能的。但由于您已经在使用 jQuery，您可以将它用于这些效果。它也可以在非 webkit 浏览器中工作。
@Felix Kling 在移动设备上不流畅，所以我需要使用 css3 :)
js代码中页面的布局是什么？是否可以发布页面的骨架？
@cfarm54 javascript: pastebin.com/Ay0GFQp9 HTML: pastebin.com/t7mC62MR

标签： javascript jquery timeout styles

【解决方案1】：

让第一个代码在它自己的函数中运行并给它一个回调函数

function addStyle(callback)
{
    $('body>header:last a,body>header:last div,body>header:last h1').css("-webkit-transition", "opacity 0.5s ease-in");

    if (typeof callback !== 'undefined') callback();
}

然后这样称呼它：

addStyle(function(){

    // Do other stuff here after css is added...

});

【讨论】：

在这种情况下，将语句一个接一个地放置会更容易。无需使用回调系统。
@SnippetSpace：我只是说这个答案中给出的代码具有相同的效果，将三个语句一个接一个地放置。这似乎对你不起作用......
解决方案不起作用:(

【解决方案2】：

你可以在 loadPage 之外声明 setTimeout，然后在 document.ready 中调用它吗？

【讨论】：

这是不可能的，因为定时事件需要在 ajax 调用之后发生。因此，如果出现连接错误，则不会发生任何事情。顺便说一句，我修好了，不用再考虑这个了，无论如何谢谢:)

【解决方案3】：

找到答案了伙计们！我不是 jquery 问题，而是 css3 技巧。

为了制作动画，元素的不透明度必须设置为 1。这发生在 1 秒延迟之后。我不了解两者之间的联系，但现在我明白了。所以我所做的只是改变这个：

$('body>header:last a,body>header:last div,body>header:last h1').css({'-webkit-transition': 'opacity 0.5s ease-in','opacity':'1'});

我简单地将 opacity:1 添加到之前为 0 的 css 中，以便开始过渡。

很抱歉让您头疼，无论如何谢谢:)

【讨论】：