3

Webページ上のすべての画像にCSSクラス「fadeIn」を付けて、最初に表示されたときにフェードインして表示されるようにします。（私はCSSアニメーションを使用してfadeInを実行しています。後で、jqueryを使用してクラスを追加および削除します。）

私は通常img要素を作成して使用しますmyImg.addClass("fadeIn")が、要素はGoogleマップのコードの奥深くに作成されており、要素にアクセスできません。img要素が実際にいつ作成されるかも不確かです。

CSSでのこのようなもの：

img {
   height: 100;
   width: 50;
   AddClassToThisElement: "fadeIn"  ***
}

このようなことは可能ですか？

編集：私が持っていた実際のCSSは：

  img[src^="da"] {
    -webkit-animation-name: fadeInFrames;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
  }

  .fadeOut {
    -webkit-animation-name: fadeOutFrames;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
  }

前者はより具体的であったため、要素にクラスfadeOutを追加しても機能しませんでした。に変更.fadeOutすることimg[src^="da"].fadeOutで、後者がより具体的になり、要素にfadeOutを追加することができます。

4

3 に答える 3

2

私の知る限り、CSSはこれを行うことができません。

したがって、私の提案は、次のようなものを使用することです。

img,
.fadeIn
{
    /* styling */
}

これで、すべての画像のスタイルがと同じになり.fadeInます。もちろん、スタイルシートでimg,の使用ごとに、関連する（疑似）セレクター/クラスを追加する必要もあります。.fadeIn

于 2012-07-30T17:36:08.907 に答える
1

jQueryを使用してフェードインを実行している場合は、基本的な$（'。fadeIn'）セレクターを使用するのではなく、これらの画像に固有のセレクターを思い付くことができる場合があります。

だからあなたがやっているなら

$('.fadeIn').fadeIn()

DOM構造には、次のような画像に固有の何かがあることに気付くかもしれません。

$('#SomeMapId div#SomeContainerId IMG').fadeIn()

あなたのページを見ずに、DOMがこれを機能させるのに十分ユニークであるかどうかはわかりませんでした。

于 2012-07-30T17:38:36.547 に答える
1

私はDragoonWraithに同意します。「私のウェブページ上のすべての画像」にこのフェード効果を持たせたい場合は、それらすべてをより一般的にターゲットにできるはずです。ただし、より具体的にする必要がある場合は、パスを見つけてください。私の答えはLeslieHanks（これを完了する直前に投稿した）に似ていますが、私が理解しているように、最初はjQueryを使用したくないが、cssトランジションを使用したいという点が異なります。したがって、より具体的にする必要がある場合は、パスを見つけてください。

#someGoogleMapId .someDeepContainerClass img {
   /* apply the css transitions */
}
于 2012-07-30T17:43:39.747 に答える