3

テキストを置き換えるために標準のfadeOut/fadeInを使用しています。しかし、このテキストは私の見出しの他のテキストの途中で置き換えられています. 何かのようなもの：

$('#flashable').fadeOut('slow', function(){
    $(this).delay(500);
    $(this).html(someNewText);
    $(this).fadeIn('slow);
});

これを行うと、DOM がシフトして前のテキストを削除し、次にシフトして put in に戻ることを除いて、うまく機能しsomeNewTextます。それが起こらない場所でこれを行う方法はありますか？ユーザーにはこのように見えます

元は：

素早い茶色のキツネが怠け者の犬を飛び越えます。

フェードアウト開始:

茶色のキツネが怠惰な犬を飛び越えます。

フェードインエンド:

賢い茶色のキツネが怠け者の犬を飛び越えます。

注: 置き換えているテキストは、常に同じ文字数です。someNewTextそのため、以前にあったものとは異なる長さの挿入による DOM の変更のフラッシュがあってはなりません$('#flashable').html()。

4

4 に答える 4

6

アニメーションの最後に設定することを意味するfadeOutためfadeTo、に置き換えることができます。これにより、レンダリングされたページから要素 box-model が削除されます。ただし、のみをアニメーション化し、要素の位置とボックス サイズを維持するため、次の要素は元の位置を維持します。fadeOutdisplay: none;fadeToopacity

$('#flashable').fadeTo(600, 0, function () {
    $(this).delay(600);
    $(this).html('smart');
    $(this).fadeTo(600, 1);
});

jsFiddle の例

于 2013-04-12T03:54:49.010 に答える
2

HTML 構造を見せてもらえますか？

ほら、これやりたい？http://jsfiddle.net/ericdum/AkJ9J/

$('#flashable').fadeTo('slow', 0, function(){
    $(this).delay(500);
    $(this).html("smart");
    $(this).fadeTo('slow', 1);
});
于 2013-04-12T03:41:02.900 に答える
0

そして、私はこれを見つけました: jQueryテキストは、あるテキストから別のテキストへフェード/トランジションしますか?

アニメーション/不透明度を使用します。他の検索者にとって、私が上で説明したことは「ジャンプ」効果と呼ばれます。

于 2013-04-12T03:39:48.330 に答える
0

fadeOut()andは使用できませんfadeIn()。アニメーションが完了するとテキスト ブロックが非表示になり、ページ レイアウトから削除されて状況が変化するためです。

代わりに、fadeTo()テキストのブロックをそのままにして不透明度を変更するだけを使用できますが、2 つのテキスト ブロックが互いに重なるように HTML を構成する必要もあります。

これが実際のデモです: http://jsfiddle.net/jfriend00/ahbyh/

于 2013-04-12T03:44:41.887 に答える