我想使用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
方法可以实现淡入效果,但这不是目标。
答案 0 :(得分:1)
你在渲染之前改变了元素的CSS,因此UI永远不会看到初始的不透明度,并且就其关注而言,不透明度从未改变。
使用setTimeout
,即使您将时间设置为0秒,控制仍然会在计划函数执行之前返回到UI。在这种情况下,可以看到第一个不透明度,然后更改会触发转换。
答案 1 :(得分:0)
使用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属性应用于所选项目。