HTML and CSS Reference
In-Depth Information
open: function(data){
close: function(data){
question = {
ask: function(data){
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.
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 :
#questions {
-webkit-animation-name: vote;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 2;
Search WWH ::

Custom Search