0

だから、私はこれにまったく慣れていないので、古いアドレスが数回点滅し、新しいテキストがそれを置き換える効果を生み出そうとしています。ただし、.replaceWith() を使用すると、他のすべての .fade および .append 呼び出しがオーバーライドされます。

    <div id="footer-address">
<strong>Address</strong>&nbsp;&nbsp; Old Address</div>

    <script>
    $( document ).ready(function() {
      $( "#footer-address" ).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).replaceWith("We have moved! Our new address is").fadeOut(400).append("<strong>Address</strong>  New Address");
    });
    </script>

このようなことを行う正しい方法を提供してくれたことに感謝します。

ありがとう。

4

3 に答える 3

1

replaceWithキューに入れられて次々に実行されるアニメーション関数とは異なります。

を使用queueして、非アニメーション関数をアニメーション キューに追加できます。

$( "#footer-address" )
    .fadeOut(400)
    .fadeIn(400)
    .fadeOut(400)
    .queue(function(){
         $( "#footer-address" ).empty().append("We have moved! Our new address is");
         $(this).dequeue();
     })
    .fadeOut(400)
    .queue(function(){
         $( "#footer-address" ).append("<strong>Address</strong>  New Address");
         $(this).dequeue();
     })

dequeue「アニメーション」が終了し、次のアニメーションを開始する必要があることを示す呼び出しを忘れないでください。

元の提案:

コールバック関数を使用して、要素を置き換える前にアニメーションが終了するのを待つことができます。

$( "#footer-address" ).fadeOut(400).fadeIn(400).fadeOut(400, function(){
    $( "#footer-address" ).replaceWith("We have moved! Our new address is").fadeOut(400,      function(){
        $( "#footer-address" ).append("<strong>Address</strong>  New Address");
    })
});
于 2013-02-21T22:14:15.150 に答える
0

CSS3 アニメーションを使用することもできます (この回答から):

#footer-address.blink {
    animation:         blink 300ms linear infinite;
    -moz-animation:    blink 300ms linear infinite; 
    -webkit-animation: blink 300ms linear infinite; 
}

@keyframes         blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }
@-moz-keyframes    blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }
@-webkit-keyframes blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }

#footer-address要素に最初に .blink クラスがあることを確認し、一定期間後に js を使用して削除します。

setTimeout(function() {
    $('#footer-address').removeClass('blink').text('We have moved! Our new address is...');
}, 4000);
于 2013-02-21T22:13:33.603 に答える
0

実際にはいくつかの問題があります。

  1. への呼び出しreplaceWithは div を置き換えており、その中の HTML を変更していないため、一度起動すると#footer-address存在しなくなります。
  2. 前に指摘したように、すべての関数が同じ方法でキューに入れられるわけではありません。

動作するはずの例（数値を微調整して、好きな効果を得る）：

$("#footer-address").fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400);

setTimeout(function() {
  $("#footer-address").html("We have moved! Our new address is").fadeOut(400);
}, 4400);

setTimeout(function() {
  $("#footer-address").html("<strong>Address</strong>  New Address").fadeIn(400);
}, 4800);

http://jsbin.com/uguhug/1/editのデモ

于 2013-02-21T22:30:37.663 に答える