Stumped, Div will rotate everywhere but not within my home page

Question

The first two links show a working rotating icon but the third link where I want it to work will not work properly...

https://jsfiddle.net/752tfqyu/17/

The JSfiddle I created works. When I took all the content within the JSfiddle and tested it on the server: It doesn't work: http://cdubach.com/inc/test.php

http://cdubach.com/pages/home/index.php Where I have an issue, the icon will not rotate.

Main Javascript/Jquery used to rotate the icon;

/* [(START)Rotate Icon:SCroll Down] ----------------> */

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() < 300) {
      $("#rotate").css({
        "top": $(window).scrollTop() + "px"
      });
    }
  });
});
/* [(END)Rotate Icon:SCroll Down] ------------------> */

var looper;
var degrees = 0;

function rotateAnimation(el, speed) {
  var elem = document.getElementById(el);
  if (navigator.userAgent.match("Chrome")) {
    elem.style.webkitTransform = "\"rotate(" + degrees + "deg)\"";
  } else {
    elem.style.transform = "\"rotate(" + degrees + "deg)\"";
  }

  looper = setTimeout('rotateAnimation(\'' + el + '\',' + speed + ')', speed);
  degrees++;
  if (degrees > 359) {
    degrees = 1;
  }
}

Answer 1

I did some comparisons between your fiddle and the code you posted and found what appears to be the issue.

It looks like you're trying to escape some double quotes in your WebKitTransForm, not totally sure why, but undoing that allows it to work.

Here's a codepen with it working:

var looper;
var degrees = 0;
function rotateAnimation(el, speed) {
  var elem = document.getElementById(el);
  if (navigator.userAgent.match("Chrome")){
    elem.style.WebkitTransform = "rotate("+degrees+"deg)";
  } else {
    elem.style.transform = "rotate("+degrees+"deg)";
  }
  looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed);
  degrees++;
  if (degrees > 359) {
    degrees= 1;
  }

}