jQueryのtoggleClassアニメーションの問題

Question

私はこのページを持っている：

http://beta.amitai-clinic.com/

あなたは、左上のロゴを置くと、それは「フェード」、その下にいくつかのテキストと同じロゴをする必要があります。

問題は、ロゴ部分が自然に色あせしているのですが、その下のテキストがすべて一緒に配置されているように見え、「自然に」色あせていないようです。

アイデア？

Answer 1

私が見たものから、あなたのテキストはマウスオーバーで異なるバックグラウンドを持つ、画像の上に書かれたと私は問題はあなたがこのような何かを代わりに試みることができること

によって引き起こされると考えている。

<div class="sublogo-stress" style=" "> 
    <img src="/wp-content/themes/SimplePress/images/trans_120x90.png"> 
    <span>test</span> 
</div> 

スパンの不透明度を0に設定して完全に非表示にすることもできます。 フェード効果が今より良くなるはずです。

Answer 2

toggleClassは、ホバークラスの不透明度と一致するように不透明度を変更し、クラスを追加します。しかし、とにかく、あなたがクラスを変更するポイントは、テキストの突然の出現として振る舞います。ここをクリックhttp://jsfiddle.net/eYJym/

このエフェクトを0にフェードすることで、このエフェクトをトグルすることができます。または元の画像の上にテキストを含む不可視のレイヤーを配置し、不透明にフェードインして、元の画像でレイヤーを非表示にします。透明でなくても画像を扱う方がずっと簡単です:)