title: Running a jquery script in Wordpress
body: <p>I am trying to use a similar script to the one is WordPress but it will not work and I know it's something to do with the way WordPress leads / sees jQuery. How would one write this to work in WordPress? I am merely swapping the boxes for images.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var fadeinBox = $("#box2");
  var fadeoutBox = $("#box1");
  
  function fade() {
      fadeinBox.stop(true, true).fadeIn(2000);
      fadeoutBox.stop(true, true).fadeOut(2000, function() {
          var temp = fadeinBox;
          fadeinBox = fadeoutBox;
          fadeoutBox = temp;
          setTimeout(fade, 1000);
      });
  }
  
  fade();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
      position: absolute;
      height: 100px;
      width: 100px;
  }
  
  #wrapper {position: relative;}
  
  #box1 {background-color: #F00;}
  #box2 {background-color: #00F;  display: none;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="wrapper"&gt;
      &lt;div id="box1" class="box"&gt;&lt;/div&gt;
      &lt;div id="box2" class="box"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the example I found on <a href="http://jsfiddle.net/jfriend00/3XwZv/" rel="nofollow">jsfiddle</a></p>