4

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

我的解决方案是尝试将动画代码拆分为一个单独的类，在我最初将不透明度设置为零之后应用该类（我在 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;
}
4

4 回答 4

1

好...

为什么在 jQuery 中将不透明度设置为 1？如果你想使用 CSS3 而不是简单的 fadeIn(200) 为什么不将“opacity: 1”添加到 css 类 thumb-animated？

编辑：

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

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

于 2012-06-30T18:28:28.550 回答
1

只使用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;
        }
于 2012-06-30T18:34:58.120 回答
0

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

$('.thumb').css('opacity','0').on('load', function(){
    $(this).addClass('thumb-animated').css('opacity','1');
});
于 2012-06-30T18:24:21.513 回答
-1

尝试这样的事情：

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

myImg = $('<img>').attr('src', 'thumb.png').load(function(){
    $('#thumb').html(myImg).fadeIn(200);
});
于 2012-06-30T18:21:29.657 回答