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

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');
});
},
answer: function(data){
var question = $("#question-"+data.question_id),
detach_me = function() {
question
.detach()
.appendTo('#questions')
.slideDown(500);
}
question
.addClass('answered')
.delay(1000)
.slideUp(500, detach_me);
}
};
})(jQuery);
Testing Out Answering Questions
To see how a question marked as answered looks to an attendee, open two browsers and place the windows side-by-
side so you can see both at once. In one browser, create a new room; in the other, join that room and ask a question.
The question will show up on the browser that created the room, at which point you can mark the question
answered. In the attendee view, the question will fade, disappear, and then be reattached in its “answered” state (see
Figure 10-9 ). Because there is only one question in the room, it won't demonstrate moving the question to the bottom
of the list, but you can perform your own experiments to see that in action if you so choose.