Question

我试图让图像在加载后用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;
}

Answer 1

嗯...

为什么在jQuery中将opacity设置为1？如果你想使用CSS3而不是简单地使用fadeIn（200），为什么不在css类中添加“不透明度：1”拇指动画？

修改

请注意，如果图像已在缓存中，则不会触发加载此外，必须添加!important以重写通过javascript修改的规则。

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

Answer 2

使用css动画怎么样？不需要JS代码。

        @-webkit-keyframes opacityChange {
            0%   { opacity: 0; }
            100% { opacity: 1; }
        }
        @-moz-keyframes opacityChange {
            0%   { opacity: 0; }
            100% { opacity: 1; }
        }
        @-ms-keyframes opacityChange {
            0%   { opacity: 0; }
            100% { opacity: 1; }
        }
        .thumb {
            width: 200px;
            height: 200px;
            opacity: 1;
            -webkit-animation: opacityChange 5s;
            -moz-animation:    opacityChange 5s;
            -ms-animation:     opacityChange 5s;
        }

Answer 3

您可以等待将该类添加到已加载的图像

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

Answer 4

尝试这样的事情：

$('#thumb').hide();

myImg = $('<img>').attr('src', 'thumb.png').load(function(){
    $('#thumb').html(myImg).fadeIn(200);
});

css3图像淡化

4 个答案: