Ryu demo (not my own), optimised

index.html

<div id="my-div"></div>

rqIgs.markdown

rqIgs

A Pen by Alastair Mucklow on CodePen.

License.

script.js

$(function() {
  
  var ryuBox = $('#my-div')
  ryuBox.html('<img src="http://i.imgur.com/90Mmdcm.png">')

  var ryu = ryuBox.find('img')
  
  ryu.hover( function() {
      this.src = 'http://i.imgur.com/nTj3Fxx.gif'
  }, function() {
      this.src = 'http://i.imgur.com/90Mmdcm.png'
  })

ryu.mousedown( function() {
    $('.demo-hadouken').remove();
    this.src = 'http://i.imgur.com/Rfj0a80.png' 
    ryuBox.append(
    '<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
    );
    $('.demo-hadouken').animate( {
        "margin-left": "800px"
    }, 600, 'swing', function() {
        this.remove();
    });
})


ryu.mousedown(function() {
  	//$('audio')[0].load();
	  //$('audio')[0].play();
})

ryu.mouseup(function() {
    this.src = 'http://i.imgur.com/nTj3Fxx.gif'
})

});

style.css

#my-div {
  width: 100%;
}