css3图像淡入淡出答案

【问题标题】：css3 image fadeincss3图像淡入淡出
【发布时间】：2012-07-01 03:05:10
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

嗯……

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

编辑：

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

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

【讨论】：

我也不希望他们等待全部加载完毕，大概有 100 张图片。我希望每张图片在完成后加载（提供几乎“棋盘”效果）
我喜欢你考虑到缓存，但我注意到当它第一次加载时它工作，当你刷新它时它的行为很时髦。我认为这与缓存有关。你认为你可以修改那个小提琴并将你的错误标记为接受的答案吗？ :)
这是因为 JSfiddle。尝试在本地这样做，这是一个示例（下载文件并打开它）dl.dropbox.com/u/6808501/fisier.html
前 2 张图片在缓存中，其他 4 张没有。
对不起，在我点击它之前我没有看到你的最后一条评论，关于它在 jsfiddle 中不起作用。 :o 谢谢！

【解决方案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;
        }

【讨论】：

很棒的方法，但问题是它不会在 img 加载时运行动画。所有缩略图都在第一个拇指加载的那一刻运行动画...

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

试试这样的：

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

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

【讨论】：

我不想使用淡入淡出解决性能问题。图片很多