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.
Archived Comments
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.
Cool - if you do - would you mind posting a picture?
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.
Very cool. Thanks for sharing.
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.
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.
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. :)
Good points.
I'm surprised no one complained about my dig at the Falcons. ;)
The Falcons will shock the world. ;)
Cool effect. Trying to figure out where I can use it.
This is the Pulsate effect in the jQuery UI library. You can see all the effects here:
http://jqueryui.com/docs/ef...
Not surprised it's been done before. :)