jQuery.load（）回调函数中的CSS属性

我想使用jQuery的

.load（）

方法获取一些内容，然后使用CSS3转换将其淡入，将不透明度从0更改为1。在CSS中，不透明度已经设置为0，同时转换属性也设置为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（）没有的

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

---

注意：我知道可以使用jQuery的

animate

或

fadeIn

方法实现淡入效果，但这不是这里的目标。

使用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属性

在渲染元素之前，您正在更改元素的CSS，因此UI不会看到初始不透明度，就其而言，不透明度也不会更改。

---

使用

setTimeout

，即使将超时时间设置为0秒，控件仍会在执行预定函数之前返回UI。在本例中，第一个不透明度被看到，然后更改触发转换。

感谢您的回复，但这并不能真正解释为什么在我上面的示例中.css（）方法不起作用。

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