6

次のコードでこれらの結果が得られるはずです。

mademoiselle
demoiselle
mesdemoiselles

代わりに、「ma」がフェードアウトすると、「mes」がフェードインしてシーケンスを作成します。

mademoiselle
madesdemoiselles
mesdemoiselles

コード：

<span class="remove">ma</span><span class="add">mes</span>demoiselle<span class="add">s</span>

$(document).ready(function() {
   $(".remove").fadeOut(4000,function(){
       $(".add").fadeIn(5000);      
   });
});

編集：削除するとバグがなくなる空のスパンを見つけました：

<span class="remove">ma</span><span class="add">mes</span>demoiselle<span class="remove"></span><span class="add">s</span>

問題は次のとおりです。これを生成するphpコードは、スパンをプレースホルダーとして使用しています。必要に応じてstr_replaceしますが、なぜこれが発生しているのか興味があります。

4

2 に答える 2

10

さて、私はあなたの問題を再現することができました。http：//jsbin.com/ocahaの例を参照してください。

何が起こっているのかというと、jQueryはあなたの空<span>がフェードアウトする必要がないことを認識できるということです。そのため、アニメーションが完了したと見なし、予想される4000ミリ秒ではなく0ミリ秒で実行されます。したがって、すべてのですぐにフェードし始め.addsます。

この動作を防ぐために、選択範囲からすべての空の要素を除外します。このような：

$(document).ready(function() {
   $(".remove")
               .filter(function(){ return ! $(this).is(":empty"); })
               .fadeOut(4000, function(){
     $(".add").fadeIn(5000);
   });
});

http://jsbin.com/oviviの実例を参照してください。

于 2009-11-05T19:24:37.513 に答える
3

動作しない場合は、「：空」を「：非表示」に変更します。

$(document).ready(function() {
   $(".remove")
               .filter(function(){ return ! $(this).is(":hidden"); })
               .fadeOut(4000, function(){
     $(".add").fadeIn(5000);
   });
});
于 2012-12-20T16:13:08.733 に答える