4

画像が読み込まれたら、css3でフェードインさせようとしています。問題は、私のメソッドが現在チェーンされている方法であり、1秒間に2回フェードインおよびフェードアウトします。単に空白になってフェードインするのではなく。

私の解決策は、アニメーションコードを別のクラスに分割して、最初に不透明度をゼロに設定した後に適用することでした（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に設定するのはなぜですか? 単にfadeIn(200)ではなくCSS3を使用したい場合は、cssクラスのthumb-animatedに「opacity: 1」を追加してみませんか?

編集：

画像が既にキャッシュにある場合、ロードはトリガーされないことに注意してください。
また、!importantjavascript で変更したルールを書き換えるために追加する必要があります。

ご覧ください: 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 に答える