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

-moz-animation-name: vote;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count:2;
-ms-animation-name: vote;
-ms-animation-duration: 0.5s;
-ms-animation-timing-function: ease-in-out;
-ms-animation-iteration-count: 2;
animation-name: vote;
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: 2;
}
@-webkit-keyframes vote {
0% { opacity: 1; }
50% { opacity: .4; }
100% { opacity: 1; }
}
@-moz-keyframes vote {
0% { opacity: 1; }
50% { opacity: .4; }
100% { opacity: 1; }
}
@-ms-keyframes vote {
0% { opacity: 1; }
50% { opacity: .4; }
100% { opacity: 1; }
}
@keyframes vote {
0% { opacity: 1; }
50% { opacity: .4; }
100% { opacity: 1; }
}
Triggering the Animation with a Class
Now that the animation is in place, all that the JavaScript needs to do is add a class to trigger it.
In addition to the animation, the script also needs to update the vote count and because there might be
multiple people voting for a question, remove the class after the animation is completed so that it can be triggered
multiple times.
Add the following bold code to init.js to complete the voting effects:
(function($) {