Could someone help me edit my first attempt at code for a blinking address replacement?

Question

So, I'm totally new to this and trying to produce an effect where an old address blinks a few times, then some new text replaces it. However, the minute I use .replaceWith(), it overrides all the other .fade and the .append calls.

    <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>

I appreciate you whacking me up side the head and offering the correct way to do something like this.

Thanks.

here are a few (more elegant) solutions for text blinking... http://stackoverflow.com/questions/1605698/text-blinking-jquery — talnicolas, Feb 21 '13 at 22:09

Matt Zeunert · Answer 1 · 2013-02-21T22:36:50.943

1

replaceWith is different from the animation functions, which are queued and executed one after the other.

You can use queue to add non-animation functions to the animation 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();
     })

Dont' forget the dequeue call to indicate that the "animation" has finished and the next one should begin.

Original suggestion:

You could use a callback function to wait for the animations to finish before replacing the element:

$( "#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");
    })
});

edited Feb 21 '13 at 22:36

answered Feb 21 '13 at 22:14

Matt Zeunert

16,075
6
52
78

1

I didn't know about the .queue. Much more elegant than my external `setTimeout()` calls. However, it's still going to break, because `replaceWith` is going to remove `#footer-address`. – David Kiger Feb 21 '13 at 22:35
@DavidKiger You're right, thanks for pointing that out. Used `.empty().append()` instead. – Matt Zeunert Feb 21 '13 at 22:38
Hi guys, for some reason my Drupal 6.28 site could not read the .queue command. It halted after the 2nd fadeOut(400). I have also had trouble using .delay() on my site. Any ideas as to why? According to my settings I'm using minified JQuery UI 1.7 and jQuery Update 1.3.2. – Tylerppp Feb 22 '13 at 17:50

score 0 · Answer 2 · edited May 23 '17 at 12:18

You could also use CSS3 animations (from this answer):

#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;} }

Make sure the #footer-address element has the .blink class to start off with, then after a certain duration, remove it using js.

setTimeout(function() {
    $('#footer-address').removeClass('blink').text('We have moved! Our new address is...');
}, 4000);

score 0 · Accepted Answer · answered Feb 21 '13 at 22:30

You actually have a couple problems.

Your call to replaceWith is REPLACING the div, not changing the HTML inside of it, so once that fires, #footer-address no longer exists.
As pointed out earlier, not all functions get queued the same way.

An example that should work (tweak the numbers to get the effect you like):

$("#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);

Demo at http://jsbin.com/uguhug/1/edit

Well, I don't have my 15 reputation yet otherwise I'd upvote this answer. Thank you for the instruction and demo. It worked on my site. I also appreciated the idea of using queue and dequeue, but for some reason those commands didn't seem to work on my Drupal 6.28 site. As a side note, I can't get .delay() to work either. Am I using the wrong library or something? — Tylerppp, Feb 22 '13 at 17:27

Could someone help me edit my first attempt at code for a blinking address replacement?

3 Answers3