javascript – css3图片fadein

我试图让图像在加载后用 css3淡入.问题是我的方法当前被链接的方式,它会两次淡入淡出.而不只是空白和淡入.

我的解决方案是尝试将动画代码拆分成一个单独的类,我应用AFTER我最初将不透明度设置为零(我在JS中这样做,所以没有启用js的人仍然可以看到图像).

它仍然没有工作

我假设它是因为在这段代码中它将不透明度设置为零并立即添加一个动画过渡类,它以某种方式捕获不透明度.css()方法,同时它仍在变化(不知道这是怎么可能的,…不应该在之前完成不透明度继续添加课程？)

// nice thumbnail loading
$('.thumb').css('opacity','0').addClass('thumb-animated').on('load',function(){
    $(this).css('opacity','1');
});   


.resources .thumb-animated {
    -webkit-transition: opacity .2s;
       -moz-transition: opacity .2s;
        -ms-transition: opacity .2s;
         -o-transition: opacity .2s;
            transition: opacity .2s;
}

解决方法

好…

为什么在jQuery中将opacity设置为1？
如果你想使用CSS3而不是简单的fadeIn(200)为什么不在css类中添加“opacity：1”拇指动画？

编辑：

请注意,如果图像已在缓存中,则不会触发加载.
此外,还必须添加！important来重写通过javascript修改的规则.

你去：http://jsfiddle.net/enTCe/5/这似乎在JSfiddle之外完美地工作,在JSfiddle看起来它等待所有图像被加载.