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.
