jQuery .load() 回调函数中的 CSS 属性

Question

我想使用 jQuery 的 .load() 方法抓取一些内容，然后使用 CSS3 过渡将其淡入，将不透明度从 0 更改为 1。不透明度在 CSS 中已设置为 0，以及过渡属性。所以我要做的就是在新内容加载后更改不透明度。

我认为这样做可以：

function loadContent(url) {
$('#panel-b').load(url + " #content", function() {
    $('#content').css("opacity", 1);
});
}

内容加载正常，但不会淡入。不透明度立即变为 1，没有过渡效果。我认为这可能是一个同步问题，所以我尝试将回调包装在 setTimeout 中，实际上确实修复了它——但是为什么？即使超时设置为 0，它仍然有效。

function loadContent(url) {
$('#panel-b').load(url + " #content", function() {
    setTimeout(function() {
        $('#content').css("opacity", 1);
    }, 0);
});
}

奇怪的是，这也有效。 .show() 有什么 .css() 没有的？

function loadContent(url) {
$('#panel-b').load(url + " #content", function() {
    $('#content').show().css("opacity", 1);
});
}

我错过了一些基本的东西吗？任何见解将不胜感激。

注意：我知道使用 jQuery 的 animate 或 fadeIn 方法可以实现淡入效果，但这不是这里的目标。

Answer 1

您在元素呈现之前更改了元素的 CSS，因此 UI 永远不会看到初始不透明度，并且就其而言，不透明度从未改变。
使用setTimeout，即使您将超时设置为 0 秒，控制仍会在计划函数执行之前返回 UI。在这种情况下，首先看到不透明度，然后更改触发过渡。

Answer 2

使用 jQuery animate 方法

function loadContent(url) {
    $('#panel-b').load(url + " #content", function() {
        $('#content').animate({
             opacity : 1
        },2000);//set duration in ms
    });
}

或者你可以使用fadeIn

function loadContent(url) {
    $('#panel-b').load(url + " #content", function() {
        $('#content').hide().fadeIn(2000);//set duration in ms
    });
}

.css() 只会将 css 属性应用于所选项目。