title: Using two for loops within a javascript function javascript animation
body: <p><strong>Added: 12/30/14 - 7:00am(EST)
  This problem has been solved</strong>
  Below I have posted a link to a jsfiddle where you can see the finished product. In addition to the rotating plus sign, I have added a div that appears off screen, and with a click of the mouse, appears onscreen. This div can be filled with content. While the aforementioned sentence would cause most on this forum to exclaim: "No duh!" I mostly included this portion for those novices who may be stumbling across this post in the next few months.  Hopefully, no one else will need to ask this question in the future. </p>
  
  <p><a href="http://jsfiddle.net/amolner/gqe4tpqs/31/" rel="nofollow">http://jsfiddle.net/amolner/gqe4tpqs/31/</a>
  Anyone is free to use the above code for any purposes. If anyone has any ways to improve the above code above for the benefit of those finding this post in the future, please feel free to tinker with it. Again, thank you to everyone who contributed thus far. So saved me a lot of headaches. </p>
  
  <p><strong>Original text:</strong>
  Upon the first click, everything works the way that it is supposed to. The plus sign moves 45 degrees to the right, turning it into an "x." It is upon the second click where thinks go awry. It is upon the second click that I would like the x to move backwards 45 degrees so that it turns back into a "+" sign. Instead, it starts over at 0 and moves right 45 degrees. I've been at this a so long that I am embarrassed to say just how long. I have lines and lines of failed code but I feel the following is the closest I've come. If anyone could help, I would greatly appreciate it. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
        &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;title&lt;/title&gt;
          &lt;link rel="stylesheet" href="reset.css"&gt;
      &lt;script&gt;
      var degrees = 0;
      function rotateAnimation(){
          for (degrees = 45; degrees &gt; -1; degrees--){
              setTimeout(function(x){
                  return function({
                      document.getElementById('thing').style.transform = "rotate("+x+"deg)";
                  }
              }(degrees),-20*degrees);
          }
  
          for (degrees = 0; degrees &lt; 45; degrees++){
              setTimeout(function(x){ 
                  return function() {
                      document.getElementById('thing').style.transform = "rotate("+x+"deg)";
                  }
              }(degrees),20*degrees);
  
          }
      }
      &lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;h1 onclick="rotateAnimation();" id="thing" style="cursor:pointer;position:fixed;top:0;left:0;font-size:5em;"&gt;+&lt;/h1&gt;
       &lt;/body&gt;
      &lt;/html&gt;  
  </code></pre>