Creating a fade/toggle/change effect in jQuery

This post is more than 2 years old.

While watching the Saints completely devastate the Panthers this weekend, I noticed something interesting in the "info ticker" (or whatever they call it) at the bottom of the screen. Whenever an important score occurred in one of the other games, there would be a "Score Alert". You would see the previous score, like ATL: 0, NO: 43, and the team that scored would fade in and out, repeat, and come back with the new score. It is a great way to highlight what changed. I thought I'd try to duplicate the effect in jQuery. I'm sure this has probably already been done (a lot), but I figured it would be a good excuse to write code on vacation. Here's what I did:

<html>

<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function() { $("#score").fadeOut(800) .fadeIn(800) .fadeOut(800, function() { $(this).html("14"); $(this).fadeIn(800); }); }) </script> <style> .scoreVal { font-size: 40px; font-weight: bold; } </style> </head>

<body>

<div id="score" class="scoreVal">7</div>

</body> </html>

The template above has just one real part of the page, the score. When my page loads, I do a few animations. I fade out, in, out, and then change the value in the call back and fade it back in. Oddly, this did not work:

$("something").fadeOut().fadeIn().fadeOut().html("14").fadeIn()

When I tried it like this, the html() call happened immediately while the animations properly went in order. If anyone knows why, let me know, but the solution I used above worked well enough and was pretty simple. You can demo this version below:

http://www.raymondcamden.com/demos/2012/jan/2/test1.html

This worked, but if I wanted to run it multiple times, or perhaps configure the speed, it would be a lot of duplication. I decided to quickly turn it into a jQuery Plugin. I haven't done one of these in a while, so, I googled, found a doc, and - I'll admit it - did a bit of cut and paste. Here's the plugin:

(function($) {

$.fn.fadeChange = function(options) {

	var settings = $.extend({
      'newVal'         : '',
      'duration' : '800'
    }, options);

	return this.each(function() {
		
		var $this = $(this);
		$this.fadeOut(settings.duration)
		   .fadeIn(settings.duration)
		   .fadeOut(settings.duration, function() {
				$this.html(settings.newVal);
				$this.fadeIn(settings.duration);
			});
	});
	
};

})(jQuery);

The plugin allows you to specify the new value and change the duration. If the duration is not specified, it will default to 800ms. Here's a new version demonstrating this.

<html>

<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="fadechange.js"></script> <script> $(document).ready(function() { $("#score").fadeChange({newVal:24}); $("#score2").fadeChange({newVal:3,duration:1200}); }) </script> <style> .scoreVal { font-size: 40px; font-weight: bold; } </style> </head>

<body>

Saints: <div id="score" class="scoreVal">7</div> Cantlanta Falcons: <div id="score2" class="scoreVal">0</div>

</body> </html>

You can demo this version by clicking the big button below.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Mario Rodrigues posted on 1/3/2012 at 2:39 AM

This is pretty cool Ray and great timing. Thanks for putting this together. I was just working on a scoreboard app for a local soccer tournament this weekend. I'm displaying the scoreboard on a 60" TV screen via Google TV.

http://wellingtonsoccer.com...

I can now use this code to add a cool effect when scores are posted.

Thanks.

Comment 2 by Raymond Camden posted on 1/3/2012 at 2:40 AM

Cool - if you do - would you mind posting a picture?

Comment 3 by Mario Rodrigues posted on 1/3/2012 at 5:09 AM

Sure, here's an image:

http://web1.wellingtonsocce...

and here's a screencast of it in action:

https://webauthor.viewscree...

Works really well.

Thanks again.

Comment 4 by Raymond Camden posted on 1/3/2012 at 6:29 AM

Very cool. Thanks for sharing.

Comment 5 by Tim Leach posted on 1/3/2012 at 6:35 AM

The reason this didn't work:
$("something").fadeOut().fadeIn().fadeOut().html("14").fadeIn();

Is because you're dealing with queued events for the fades, which stack up and run in order each starting when the previous finishes. The change to the html does not get processed through the effect queue so it just happens immediately as that line is executed.

I think I explained that right.

Comment 6 by Raymond Camden posted on 1/3/2012 at 6:39 AM

Thanks Tim. I guess I just figured if I could chain em, it would be smart enough to put my non-animation stuff in the queue too.

Comment 7 by Tim Leach posted on 1/3/2012 at 8:12 PM

I believe it's done this way because the effects are a bunch of timed events and otherwise that command would take almost a second to execute it is actually waited, and throw off all kinda of slow script warnings.

So anything that takes time to run gets queued, and everything else happens instantly. I'm sure they never thought to queue a simple dom change like that because it's not any kind of effect. Or because it'd be a pain to write. :)

Comment 8 by Raymond Camden posted on 1/3/2012 at 8:15 PM

Good points.

I'm surprised no one complained about my dig at the Falcons. ;)

Comment 9 by Tom Day posted on 1/4/2012 at 6:42 PM

The Falcons will shock the world. ;)

Cool effect. Trying to figure out where I can use it.

Comment 10 by GrumpyCFer posted on 1/4/2012 at 9:48 PM

This is the Pulsate effect in the jQuery UI library. You can see all the effects here:

http://jqueryui.com/docs/ef...

Comment 11 by Raymond Camden posted on 1/4/2012 at 9:52 PM

Not surprised it's been done before. :)