gistfile1.txt

// variables get initialized up here. That way they're accessible from inside any of the functions below.
var playing = false; // nothing is happening until you click
var w = 500; // width of mouth frames
var l = 0; // keep track of left edge position of mouth sprite image
var mouthInterval; // you'll start and stop this below
var fps = 1000/30; // the second number is the fps
var aud = new Audio("audio/theRightTrack.mp3"); // load the audio before playing it

$( document ).ready(function() { // this is just jQuery saying "ready!" and will be in every javascript file you ever make. I put all my events and functions inside it
  $('.gran').click(function(){
    if(!playing){ // turn her on
      playGrandma();
    }else{ // turn it off
      pauseGrandma();
    }
  })
  function playGrandma() {
    playing = true;
    aud.play();
    mouthInterval = setInterval(function(){
      l-=w; // subtract the width of a frame every frame to show the next image in the sequence
      if(l <= -$('.gran-img img').width()){ // if it's at the end, start over. Maybe this should stop?
        l = 0;
      }
      $('.gran-img img').css({
        '-webkit-transform':'translateX('+l+'px)' // set the position
      })
    },fps);
  }
  function pauseGrandma() {
    playing = false;
    clearInterval(mouthInterval); // turn the animation off
    aud.pause();
  }
});