1

こんにちは私は誰かが私の問題で私を助けることができるかどうか疑問に思っていました。ロールオーバーテキストをあるテキストから次のテキストにゆっくりとフェードさせたい。私のウェブサイトにアクセスして、私が話していることを確認してください〜http：//neutralmotive.com/

「ニュートラル」にカーソルを合わせると、テキストが「メディア」にすばやく瞬時に入れ替わります。「動機」にカーソルを合わせると同じことが起こり、「デザイン」 にすばやく瞬時に切り替わります。

マウスをテキストの上に置いたときに、テキストが1つのテキストから次のテキストにゆっくりとスムーズにフェードするようにします。ajaxやjqueryを使用せずに単純なJavaScriptを使用しています

助けてください。

4

2 に答える 2

3

すべてのブラウザをサポートしたくない場合はanimated、スパンにクラスを追加して css を使用します。

.hide{
    visibility: hidden;
    opacity: 0;
}
.show{
    visibility: visible;
    opacity: 1;
}
.animated{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

欠点：

.hideとの両方.showが表示されるため、絶対に配置する必要があります

プログラムでクラスを切り替えることにより、javascript を使用してこれを行うこともできます。

ここにいくつかの有用な情報源があります:

CSS遷移時のコールバック

于 2013-01-04T08:25:51.690 に答える