文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery .load()回调函数中的CSS属性

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

Stack Overflow用户

提问于 2014-01-19 06:47:08

回答 2查看 144关注 0票数 3

我想使用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方法来实现淡入效果，但这不是目的所在。

jquery

css

ajax

callback

settimeout

Stack Overflow用户

发布于 2014-01-19 06:53:22

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

票数 0

查看全部 2 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21214026

复制

相似问题

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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