Basics

Try toggling this button with the code given below:


$('#btn-test').toggleClass('btn-primary btn-success'); // Classic jQuery syntax
$$('btn-test').toggleClass('btn-primary btn-success'); // Firebolt's ID selector syntax (can also use the alias $ID to be more verbose)
    

You may be asking, "Why would I want to use this other syntax? They both accomplish the same thing and the code is almost identical."

The answer is that even though the code is very similar, what happens behind the scenes is very different. When using the jQuery syntax, the CSS selector string is parsed, the button element is added to an array-like collection, and the collection is then looped over to toggle the class of each element in the collection (or in this case, the one button element).

With the ID selector syntax, the native document.getElementById() function is used immediately to retrieve the button and .toggleClass() is called directly on the element to toggle its class name. The ID selector syntax can be up to twice as fast as the classic syntax as demonstrated by this jsPerf test.


Animations

Since Firebolt's animations are done with CSS transitions, animating special style properties does not require any plugins and is very simple.

Animating Colors

In this example, the document body's font color and text color is cycled through the rainbow.

Relevant Code:


var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'violet'],
    colorIndex = 0,
    bgColorIndex = 3;

function cycleColors() {
    colorIndex = ++colorIndex % colors.length;
    bgColorIndex = ++bgColorIndex % colors.length;
    document.body.animate(
        {color: colors[colorIndex], backgroundColor: colors[bgColorIndex]},
        1000,
        'linear',
        cycleColors
    );
}

/* Starts the animation */
cycleColors();

/* Stops the animation and restores the body's original style */
document.body.stop().style.cssText = '';
    

Demo:

Transform Animations

In this example, clicking on the first image makes it spin all the way around, and clicking the other one makes it grow and shrink.

Code:


<p>
  <img id="img-rotate" src="/img/html5.png" />
  <img id="img-scale" src="/img/js6.png" />
</p>

<script>
$$('img-rotate').on('click', function() {
  this.finish() // Call .finish() in case the image is clicked in the middle of the animation
      .animate({transform: 'rotate(360deg)'}, 1000, function() {
         this.css('transform', ''); // Clear the transform style so the animation can be run again
      });
});

$$('img-scale').on('click', function() {
  this.stop(); // Stop the animation in case it's already running
  if (this.data('isBig')) {
    this.animate({transform: ''}, 700).data('isBig', false);
  } else {
    this.animate({transform: 'scale(2)'}, 700).data('isBig', true);
  }
});
</script>
    

Demo:


Not sure what else to do? Check out the Firebolt API