Implementing Realtime Events and jQuery Effects - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 247

open: function(data){
location.reload();
},
close: function(data){
location.reload();
}
},
question = {
ask: function(data){
$(data.markup)
.find('input[name=nonce]').val(nonce).end()
.hide().prependTo('#questions').slideDown('slow');
}
};

})(jQuery);

■ to keep the JavaScript concise, we're using the var declaration only once for all three variables in this script.
this is mostly a stylistic choice, but there are also arguments out there claiming a miniscule performance improvement
using this approach.

Note

Adding Votes to a Question
When an attendee votes up a question, the count should update next to the vote button. However, we want to draw
just a bit more attention to the event than that, so let's add a subtle animation as well.

Adding the Animation to the Stylesheet
Because CSS3 introduced animation, and because most modern browsers support hardware acceleration for CSS3
animations, your app will use a keyframed CSS animation in favor of a jQuery animation.
To accomplish this, you first have to determine which class ( .new-vote in this case) will trigger the animation and
then set it up. For this animation, called vote , we're going to quickly fade the question out and then back in again by
adjusting opacity. This will be done—or iterated—twice.
Unfortunately, you'll need vendor-specific prefixes to ensure that the animation works in all browsers, so what
should be a quick addition turns into a fairly large amount of CSS.
Add the following code to the bottom of assets/styles/main.css :

/*
* ANIMATION
*****************************************************************************/

#questions li.new-vote {
-webkit-animation-name: vote;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 2;