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

channel.bind('close', function(data){ room.close(data); });
channel.bind('open', function(data){ room.open(data); });
channel.bind('ask', function(data){ question.ask(data); });
channel.bind('vote', function(data){ question.vote(data); });
channel.bind('answer', function(data){ });
var nonce = $('input[name=nonce]:eq(0)').val(),
room = {
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');
},
vote: function(data){
var question = $('#question-'+data.question_id),
cur_count = question.data('count'),
new_count = cur_count+1;
// Updates the count
question
.attr('data-count', new_count)
.data('count', new_count)
.addClass('new-vote');
setTimeout(1000, function(){
question.removeClass('new-vote');
});
}
};
})(jQuery);
Testing Out the Animation
To see this in action, use two browsers to join a room—make sure neither browser is the presenter—and place them
side-by-side so you can see both at once.
In one browser, ask a new question; it will be dynamically added to the other browser window when the ask event
is triggered.
In the other browser, vote up the new question. Watch the first browser as you submit the vote: it will run through
the animation before returning to its normal state. It's difficult to demonstrate this in a still image, but Figure 10-8
shows the animation in progress.