0

我有一些图像我想在页面加载后将其设置为 100% 不透明度。

我有这段代码，但由于某种原因它不起作用。

CSS代码是...

#photos img {
  width: 100% !important;
  height: auto !important;
  margin: 5px 10px;
  opacity: 0.2;
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.loaded {
  opacity: 1;
}​

jQuery代码是...

$(function(){
    $('#photos img').on("load", function(){
        $(this).addClass("loaded");
    });
});​

我这里有 jsfiddle... http://jsfiddle.net/rzdzf/

我确定我错过了一些非常小的东西......？任何帮助，将不胜感激。

4

4 回答 4

4

尝试做这样的事情......

$('#photos img').animate({opacity: 1}, 1500 );

或者对于负载：

$('#photos img').on("load", function(){
     $(this).animate({opacity: 1}, 1500 );
});
于 2012-09-18T20:29:32.523 回答
1

如果只是在这个小提琴中，那是因为左窗格上的设置说要在onLoad上运行代码；但是你有一个 onLoad 在那里，但它已经加载，所以它不会运行。将其更改为 nowrap。当我这样做时，它按预期工作。

于 2012-09-18T20:20:08.493 回答
0

将此用作您的脚本：

$(function(){
    $('#photos img').animate({opacity:1});
    });​
于 2012-09-18T20:31:57.280 回答
0

只需绑定到window.load事件，所有图像都将在该点加载。load由于绑定到图像事件的问题，这很有帮助。由于浏览器缓存，谁知道图像是否已经加载（在这种情况下，您的加载事件处理程序不会触发）

//run this in the global scope, the `window` object is always available
$(window).on("load", function () {
    $('#photos img').addClass("loaded");
});​

这是一个演示：http: //jsfiddle.net/rzdzf/10/

您的.loaded课程也没有被应用，因为它没有#photos img规则那么具体，所以让它更具体：

#photos img.loaded {
    opacity : 1;
}
于 2012-09-18T20:34:35.303 回答