0

ページが読み込まれたら、100% の不透明度にアニメーション化する画像がいくつかあります。

私はこのコードを持っていますが、何らかの理由で機能しません。

CSSコードは...

#photos img {
  width: 100% !important;
  height: auto !important;
  margin: 5px 10px;
  opacity: 0.2;
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.loaded {
  opacity: 1;
}​

Jqueryコードは...

$(function(){
    $('#photos img').on("load", function(){
        $(this).addClass("loaded");
    });
});​

ここにjsfiddleがあります... http://jsfiddle.net/rzdzf/

私は本当に小さなものを見逃していると確信しています...？どんな助けでも大歓迎です。

4

4 に答える 4

4

このようなことをしてみてください...

$('#photos img').animate({opacity: 1}, 1500 );

またはロード中の場合：

$('#photos img').on("load", function(){
     $(this).animate({opacity: 1}, 1500 );
});
于 2012-09-18T20:29:32.523 に答える
1

このフィドルだけにある場合は、左側のペインの設定でコード onLoad を実行するように指定されているためです。しかし、そこに onLoad がありますが、既にロードされているため、実行されません。nowrap に変更します。これを実行すると、期待どおりに機能しました。

于 2012-09-18T20:20:08.493 に答える
0

イベントにバインドするだけwindow.loadで、その時点ですべての画像が読み込まれます。loadこれは、画像イベントへのバインドに問題があるため便利です。ブラウザのキャッシュにより、画像がすでにロードされているかどうかは誰にもわかりません（この場合、ロードイベントハンドラは起動しません）

//run this in the global scope, the `window` object is always available
$(window).on("load", function () {
    $('#photos img').addClass("loaded");
});​

これがデモです：http：//jsfiddle.net/rzdzf/10/

また、.loadedクラスは#photos imgルールよりも具体的でないため適用されていないため、より具体的にします。

#photos img.loaded {
    opacity : 1;
}
于 2012-09-18T20:34:35.303 に答える
0

これをスクリプトとして使用します：

$(function(){
    $('#photos img').animate({opacity:1});
    });​
于 2012-09-18T20:31:57.280 に答える