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属性应用于所选项目。

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

2 个答案: